udp-react-enterprise-component-library 25.16.0 → 25.16.2-beta.1

package/dist/DataBrowserContainer-CESNdu3e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataBrowserContainer-CESNdu3e.js","names":["filterChipsArray"],"sources":["../src/dataBrowser/DataBrowserColumnDefs.js","../src/dataBrowser/DataBrowserContainer.jsx"],"sourcesContent":["import {\n  toTitleCase,\n  toLowerFirstChar\n} from '../utilities/input/StringUtilities';\n\nconst defaultGridColumn = {\n  headerName: '',\n  field: '',\n  minWidth: 80,\n  autoHeight: false,\n  sortable: false\n};\n\nexport const DataBrowserColumnDefs = (\n  entityAttributes,\n  actionList,\n  isServerSide,\n  queryColumnsData,\n  columnName = 'Actions',\n  crudTableActionRenderName = 'actionsRenderer',\n  panelDirection = 'right'\n) => {\n  const childEntityAttributes = entityAttributes?.reduce((defs, element) => {\n    if (element?.extendedProperties?.childEntity) {\n      defs.push(element);\n    }\n    return defs;\n  }, []);\n\n  let shownColumns = [];\n  let hiddenColumns = [];\n\n  entityAttributes?.forEach((element) => {\n    if (!element?.extendedProperties?.childEntity) {\n      let matchingColumn = null;\n      const matchingColumnIndex = queryColumnsData.findIndex(\n        (column) => column.name === element?.name\n      );\n\n      if (matchingColumnIndex >= 0) {\n        matchingColumn = queryColumnsData[matchingColumnIndex];\n      }\n\n      // update column header if attribute has a child entity\n      const childEntity = childEntityAttributes.find(\n        (ea) =>\n          Object.keys(ea?.extendedProperties?.childEntityAssoc || {}).length &&\n          !ea?.extendedProperties?.childEntityAssoc?.UdpType &&\n          ea?.name === element?.name &&\n          ea?.extendedProperties?.childEntityAssoc.Keys.find((k) =>\n            toLowerFirstChar(k).includes(element?.name)\n          )\n      );\n\n      let columnHeaderName = toTitleCase(\n        childEntity ? childEntity?.reference : element?.name\n      );\n\n      if (matchingColumn) {\n        columnHeaderName = toTitleCase(\n          childEntity\n            ? childEntity?.reference\n            : matchingColumn?.alias || matchingColumn?.name\n        );\n      }\n\n      let def = {\n        ...defaultGridColumn,\n        headerName: columnHeaderName,\n        field: element?.name.charAt(0).toLowerCase() + element?.name.slice(1),\n        hide: !matchingColumn\n      };\n\n      if (element?.extendedProperties?.searchable && isServerSide) {\n        def = {\n          ...def,\n          filter: 'agTextColumnFilter',\n          filterParams: {\n            suppressAndOrCondition: true,\n            filterOptions: [\n              'equals',\n              'contains',\n              'notEqual',\n              'greaterThan',\n              'lessThan',\n              'greaterThanOrEqual',\n              'lessThanOrEqual'\n            ]\n          },\n          enableRowGroup: true\n        };\n      }\n      if (element?.extendedProperties?.orderable || !isServerSide) {\n        def = {\n          ...def,\n          sortable: true\n        };\n      }\n\n      if (matchingColumn) {\n        shownColumns[matchingColumnIndex] = def;\n      } else {\n        hiddenColumns.push(def);\n      }\n    }\n  });\n\n  let columnDefs = shownColumns.concat(hiddenColumns);\n\n  columnDefs.push({\n    headerName:\n      crudTableActionRenderName === 'actionsRenderer' ? 'Actions' : columnName,\n    filter: false,\n    pinned: panelDirection,\n    width: 150,\n    maxWidth: 180,\n    cellRenderer: crudTableActionRenderName,\n    cellRendererParams: {\n      actionList\n    },\n    valueGetter: (params) => params.data,\n    suppressMenu: true,\n    sortable: false,\n    cellStyle: { display: 'flex', alignItems: 'center' }\n  });\n\n  return columnDefs;\n};\n\nexport const defaultColActionsDef = {\n  resizable: true,\n  editable: false,\n  sortable: false,\n  filter: true,\n  floatingFilter: false,\n  enableRowGroup: true\n};\n","import React, { useMemo, useState, useCallback, useEffect } from 'react';\nimport { AmbientGridTemplate } from '../UI/templates/AmbientGridTemplate';\nimport { SideSheet } from '../UI/surfaces/SideSheet';\nimport { ActionsRenderer } from '../UI/templates/ui/renderers/ActionsRenderer';\nimport { DataBrowserColumnDefs } from './DataBrowserColumnDefs';\nimport {\n  AddIcon,\n  LookupEntitiesIcon,\n  ConfigurationSolidIcon\n} from '@fluentui/react-icons';\nimport { CrudTableSidePanel } from '../maintenanceEngine/crudBrowser/CrudTableSidePanel';\nimport { format } from 'date-fns';\nimport { findTermByType } from '../utilities/maintenanceEngine/CrudBrowserUtilities';\nimport { cloneDeep } from 'lodash';\nimport { useTranslation } from 'react-i18next';\nimport { useHistory } from 'react-router-dom';\nimport { LookupTypeIdEnums, UdpEnums } from '../enums/unitySystemEnums';\nimport {\n  executeQueryAdHoc,\n  executeQueryWithParameters\n} from '../udp/utilities/methodUtils';\nimport { useAgGridApi } from '../utilities/aggrid/AgTable';\nimport { SearchServiceDatasource } from '../utilities/aggrid/datasources/SearchServiceDatasource';\nimport { useUser } from '../utilities/auth/useUser';\nimport {\n  toTitleCase,\n  toUpperFirstChar\n} from '../utilities/input/StringUtilities';\nimport { getSanitizedName } from '../utilities/entities/entityUtilities';\nimport { useQueryExecutors } from '../hooks/useQueryExecutors';\nimport { useLookupsStore } from '../stores/lookupsStore';\nimport { SqlFilterOperators } from '../enums/aggridEnums';\nimport { useBuildEnvironment } from '../shell/ui/EnvironmentRibbon';\nimport { usePromotedMethodEntity } from '../hooks/usePromotedMethodEntity';\nimport { getSearchObject } from '../utilities/search/SearchUtilities';\n\nconst GRID_ID = '4be3be45-1930-4ab9-b7b7-0c0fa3e30490';\n\nexport const DataBrowserContainer = (props) => {\n  const {\n    entityData,\n    actionList,\n    onCreate,\n    entityAttributes,\n    foreignKeyData,\n    isLoading,\n    promotedEntity,\n    setEntityData,\n    apiMethod,\n    isServerSide = false,\n    setGridApi,\n    filterElements,\n    backToConfigPage,\n    queryColumnsData,\n    lookupsMap = {},\n    ...other\n  } = props;\n  const [isSheetOpen, setSheetOpen] = useState(false);\n  const [sideSheetWidth, setSideSheetWidth] = useState(600);\n  const [sideSheetButtonLabel, setSideSheetButtonLabel] = useState('');\n  const [otherSideSheetProps, setOtherSideSheetProps] = useState({});\n  const [sideSheetOnSubmit, setSideSheetOnSubmit] = useState(\n    () => () => console.warn('onSubmit not set')\n  );\n  const [filterChipsArray, setFilterChipsArray] = useState([]);\n  const [searchFilterElements, setSearchFilterElements] =\n    useState(filterElements);\n  const [entityUdpObjectInfo, setEntityUdpObjectInfo] = useState(null);\n  const { t } = useTranslation();\n  const history = useHistory();\n  const user = useUser();\n  const { gridApi, gridColumnApi, onGridReady } = useAgGridApi();\n  const { executeQueryAdHocAndMapLookups, getCleanData } = useQueryExecutors();\n  const lookupApiMethodId = useLookupsStore((state) => state.lookupApiMethodId);\n  const buildEnv = useBuildEnvironment();\n  const closeSheet = useCallback(() => {\n    setSheetOpen(false);\n  }, []);\n\n  const { data: udpObjectInfoEntity } = usePromotedMethodEntity(\n    'udpObjectInfo',\n    true\n  );\n\n  const entityName = useMemo(() => {\n    if (!promotedEntity) return '';\n    return promotedEntity.entityName || '';\n  }, [promotedEntity]);\n\n  const commonEntityName = useMemo(() => {\n    if (!entityName || !entityUdpObjectInfo) return '';\n    return toTitleCase(\n      entityUdpObjectInfo?.properties?.displayName ||\n        getSanitizedName(entityName)\n    );\n  }, [entityName, entityUdpObjectInfo]);\n\n  const createApiMethodPageId = useMemo(() => {\n    return promotedEntity?.unityBaseCreateMethod?.pageId;\n  }, [promotedEntity]);\n\n  const secondaryActionButtons = useMemo(() => {\n    const actions = [];\n    if (backToConfigPage) {\n      actions.push({\n        onClick: backToConfigPage,\n        label: t('Back To Config'),\n        icon: ConfigurationSolidIcon,\n        tooltip: t('Back To Config'),\n        background: 'transparent'\n      });\n    }\n    // actions.push({\n    //   onClick: () => {},\n    //   label: t('Load to Tree'),\n    //   icon: UploadIcon,\n    //   tooltip: t('Load to Tree'),\n    //   background: 'transparent'\n    // });\n    return actions;\n  }, [backToConfigPage, t]);\n\n  const virtualActions = useMemo(() => {\n    return [\n      // Action for opening Virtual Configuration\n      {\n        id: 3,\n        title: t('Open Virtual Table'),\n        icon: LookupEntitiesIcon,\n        loading: !!!foreignKeyData,\n        onClick: (value) => {\n          history.push({\n            pathname: `/virtual/${value.id}`,\n            search: `?entityName=${entityName}`,\n            state: {\n              value,\n              promotedEntity,\n              label: value.name\n            }\n          });\n        },\n        checkDisabled: (value) => value.typeId !== LookupTypeIdEnums.Lookup\n      }\n    ];\n  }, [entityName, t, history, promotedEntity, foreignKeyData]);\n\n  const jointActionList = useMemo(() => {\n    if (!actionList) {\n      return [];\n    }\n    // Check if it's a udp lookup entity\n    if (entityName.toLowerCase() === UdpEnums.Udp_Lookup.toLowerCase()) {\n      return [...actionList, ...virtualActions];\n    }\n    return actionList;\n  }, [actionList, virtualActions, entityName]);\n\n  const columnDefs = useMemo(() => {\n    return DataBrowserColumnDefs(\n      entityAttributes,\n      jointActionList,\n      true,\n      queryColumnsData\n    );\n  }, [entityAttributes, jointActionList, queryColumnsData]);\n\n  const groupData = useMemo(() => {\n    return columnDefs?.map((item) => {\n      return {\n        groupItem: item.field,\n        label: item.headerName,\n        value: item.field\n      };\n    });\n  }, [columnDefs]);\n\n  const SideOptionList = useMemo(\n    () => (\n      <SideSheet\n        open={isSheetOpen}\n        onClose={closeSheet}\n        title={`Add New ${commonEntityName}`}\n        width={sideSheetWidth}\n        buttonLabel={sideSheetButtonLabel}\n        onSubmit={sideSheetOnSubmit}\n        {...otherSideSheetProps}\n      >\n        <CrudTableSidePanel\n          entityAttributes={entityAttributes}\n          foreignKeyData={foreignKeyData}\n          onCreate={onCreate}\n          closeSideSheet={closeSheet}\n          pageId={createApiMethodPageId}\n          setSideSheetWidth={setSideSheetWidth}\n          setSideSheetButtonLabel={setSideSheetButtonLabel}\n          setSideSheetOnSubmit={setSideSheetOnSubmit}\n          setSideSheetProps={setOtherSideSheetProps}\n          isNewEntry={true}\n          entityData={entityData}\n          entityName={entityName}\n        />\n      </SideSheet>\n    ),\n    [\n      isSheetOpen,\n      closeSheet,\n      entityName,\n      sideSheetWidth,\n      sideSheetButtonLabel,\n      sideSheetOnSubmit,\n      entityAttributes,\n      foreignKeyData,\n      onCreate,\n      createApiMethodPageId,\n      entityData,\n      otherSideSheetProps,\n      commonEntityName\n    ]\n  );\n\n  const getLookupResults = useCallback(async () => {\n    if (!lookupsMap || !lookupApiMethodId) return null;\n    const lookupToFilterOn = Object.values(lookupsMap).find(\n      (item) => item.filterOn\n    );\n    const lookupId = lookupToFilterOn?.value || '';\n    if (lookupId) {\n      const lookupResult = await executeQueryWithParameters(\n        { data: { id: lookupId } },\n        lookupApiMethodId\n      );\n      return lookupResult;\n    }\n    return null;\n  }, [lookupsMap, lookupApiMethodId]);\n\n  const formattedData = useMemo(() => {\n    if (entityData) {\n      let formattedEntityData = cloneDeep(entityData);\n\n      // get list of attributes that are datetime\n      const datetimeFields = entityAttributes?.reduce((defs, element) => {\n        if (\n          !element?.extendedProperties?.childEntity &&\n          findTermByType(element?.type, 'datetime')\n        ) {\n          defs.push(\n            element?.name.charAt(0).toLowerCase() + element?.name.slice(1)\n          );\n        }\n        return defs;\n      }, []);\n\n      if (datetimeFields?.length) {\n        formattedEntityData.forEach((e) => {\n          Object.keys(e).forEach((key) => {\n            // format all datetime fields\n            if (datetimeFields.find((field) => field === key)) {\n              // LAA UNT-2977: add null check to prevent default date from being added when null\n              if (e[key] === null) return;\n              e[key] = format(new Date(e[key]), 'yyyy/MM/dd kk:mm:ss');\n            }\n          });\n        });\n      }\n\n      return formattedEntityData;\n    }\n    return [];\n  }, [entityAttributes, entityData]);\n\n  const handleChipToggle = useCallback(\n    (chip) => {\n      if (isServerSide && chip && chip.filterValue && chip.keyName) {\n        const updatedSearchFilterElements = [...searchFilterElements];\n        const chipFilterElement = {\n          searchValue: chip.filterValue,\n          searchField: toUpperFirstChar(chip.keyName),\n          searchOperator: SqlFilterOperators.EQUALS\n        };\n        updatedSearchFilterElements.push(chipFilterElement);\n        setSearchFilterElements(updatedSearchFilterElements);\n      } else {\n        // TODO: handle client side filter chips\n      }\n    },\n    [isServerSide, searchFilterElements]\n  );\n\n  const handleChipUntoggle = useCallback(() => {\n    setSearchFilterElements(filterElements);\n  }, [filterElements]);\n\n  const setFilterChips = useCallback(async () => {\n    let filterChipsArray = [];\n\n    // A list of all the products (for product lookup)\n    const lookup = await getLookupResults();\n    const lookupResults = lookup?.data;\n\n    if (!lookupResults) {\n      setFilterChipsArray([]);\n      return; // no lookup results\n    }\n\n    let keyName = lookupResults.keyName;\n    const valueName = lookupResults.valueName;\n\n    const lookupToFilterOn = Object.values(lookupsMap).find(\n      (item) => item.filterOn\n    );\n\n    let chipKey = keyName;\n    const lookupMapKeys = Object.keys(lookupsMap);\n    for (let i = 0; i < lookupMapKeys.length; i++) {\n      const key = lookupMapKeys[i];\n      if (lookupsMap[key].value === lookupToFilterOn?.value) {\n        chipKey = key;\n        break;\n      }\n    }\n\n    // Add the chips\n    for (let i = 0; i < lookupResults?.data.length; i++) {\n      const lookupResult = lookupResults.data[i];\n\n      const label = lookupResult[valueName];\n      const numRows = formattedData?.filter(\n        (obj) => obj[keyName] === label\n      )?.length;\n\n      let chipData = {\n        label: `${label}`,\n        value: !isServerSide ? numRows || '' : '',\n        filterValue: lookupResult[keyName],\n        id: i,\n        keyName: chipKey\n      };\n      chipData.onToggle = () => handleChipToggle(chipData);\n      chipData.onUntoggle = () => handleChipUntoggle();\n\n      // Only add the chip if it has results and is not using server side\n      if (!isServerSide && numRows > 0) {\n        filterChipsArray.push(chipData);\n      }\n      if (isServerSide) {\n        filterChipsArray.push(chipData);\n      }\n    }\n\n    setFilterChipsArray(filterChipsArray);\n  }, [\n    getLookupResults,\n    handleChipToggle,\n    handleChipUntoggle,\n    isServerSide,\n    formattedData,\n    lookupsMap\n  ]);\n\n  useEffect(() => {\n    setFilterChips();\n  }, [setFilterChips]);\n\n  useEffect(() => {\n    setSearchFilterElements(filterElements || []);\n  }, [filterElements]);\n\n  useEffect(() => {\n    if (!gridApi) return;\n    if (setGridApi) {\n      setGridApi(gridApi);\n    }\n    if (promotedEntity && isServerSide && lookupsMap) {\n      let datasource = SearchServiceDatasource(\n        null,\n        promotedEntity?.unityBaseSearchMethod?.apiMethodId,\n        searchFilterElements,\n        1,\n        executeQueryAdHocAndMapLookups,\n        setEntityData,\n        lookupsMap,\n        false,\n        getCleanData\n      );\n      // eslint-disable-next-line no-unused-expressions\n      gridApi?.setServerSideDatasource(datasource);\n    }\n  }, [\n    gridApi,\n    promotedEntity,\n    setEntityData,\n    setGridApi,\n    isServerSide,\n    searchFilterElements,\n    executeQueryAdHocAndMapLookups,\n    lookupsMap,\n    getCleanData\n  ]);\n\n  useEffect(() => {\n    const executeSearchForEntityUdpObjectInfo = async (\n      apiMethodId,\n      sanitizedEntityName\n    ) => {\n      const filterElements = [\n        {\n          searchField: 'SanitizedName',\n          searchOperator: '=',\n          searchValue: sanitizedEntityName\n        }\n      ];\n      const requestObj = getSearchObject(filterElements, 1, 50, false);\n      const response = await executeQueryAdHoc(\n        { data: requestObj },\n        apiMethodId\n      );\n      if (response.status === 200) {\n        const data = response?.data?.pageList[0];\n        setEntityUdpObjectInfo(data);\n      }\n    };\n    if (udpObjectInfoEntity?.unityBaseSearchMethod && entityName) {\n      executeSearchForEntityUdpObjectInfo(\n        udpObjectInfoEntity?.unityBaseSearchMethod?.apiMethodId,\n        getSanitizedName(entityName)\n      );\n    }\n  }, [udpObjectInfoEntity, entityName]);\n\n  return (\n    <>\n      <AmbientGridTemplate\n        gridId={GRID_ID}\n        user={user}\n        useNewHeader\n        api={gridApi}\n        onGridReady={onGridReady}\n        columnApi={gridColumnApi}\n        apiMethod={apiMethod}\n        title={commonEntityName}\n        data={!isServerSide && formattedData}\n        columnDefs={columnDefs}\n        groupingData={groupData}\n        onPrimaryActionClick={() => setSheetOpen && setSheetOpen(true)}\n        primaryActionLabel={t('Add')}\n        primaryActionIcon={AddIcon}\n        frameworkComponents={{ actionsRenderer: ActionsRenderer }}\n        height={`calc(100vh - ${buildEnv ? '139px' : '114px'})`}\n        hideSearchBar={isServerSide}\n        loading={isLoading}\n        suppressScrollOnNewData\n        dynamicSizing={false}\n        // rowSelection='multiple'\n        // rowMultiSelectWithClick={true}\n        disableRowSelection={true}\n        rowModelType={isServerSide ? 'serverSide' : null}\n        serverSideStoreType={isServerSide ? 'partial' : null}\n        cacheOverflowSize={isServerSide ? 2 : null}\n        cacheBlockSize={isServerSide ? 20 : null}\n        maxConcurrentDatasourceRequests={isServerSide ? 1 : null}\n        secondaryActionButtons={secondaryActionButtons}\n        filterChips={[...filterChipsArray]}\n        {...other}\n      />\n      {SideOptionList}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/DateTimeField-O7EKOyoH.js

@@ -0,0 +1,32 @@
+import React, { useCallback, useMemo } from "react";
+import { DateTime } from "luxon";
+import { KeyboardDateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
+import DateFnsUtils from "@date-io/date-fns";
+
+//#region src/UI/inputs/datetimes/DateTimeField.jsx
+/**
+* TextField for date input
+*/
+const DateTimeField = (props) => {
+	const { onChange: onChangeProp, value: valueProp,...other } = props;
+	const dateFormat = "yyyy-MM-dd HH:mm";
+	const isValidDate = (date) => {
+		return date instanceof Date && !isNaN(date);
+	};
+	const onChange = useCallback((value$1) => onChangeProp && onChangeProp(isValidDate(value$1) ? value$1 : void 0), [onChangeProp]);
+	const value = useMemo(() => {
+		console.log(valueProp);
+		return isValidDate(valueProp) ? DateTime.fromISO(valueProp.toISOString()) : null;
+	}, [valueProp]);
+	return /* @__PURE__ */ React.createElement(MuiPickersUtilsProvider, { utils: DateFnsUtils }, /* @__PURE__ */ React.createElement(KeyboardDateTimePicker, {
+		format: dateFormat,
+		variant: "inline",
+		onChange,
+		value,
+		...other
+	}));
+};
+
+//#endregion
+export { DateTimeField };
+//# sourceMappingURL=DateTimeField-O7EKOyoH.js.map

package/dist/DateTimeField-O7EKOyoH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeField-O7EKOyoH.js","names":["value"],"sources":["../src/UI/inputs/datetimes/DateTimeField.jsx"],"sourcesContent":["import { DateTime } from 'luxon';\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  KeyboardDateTimePicker,\n  MuiPickersUtilsProvider\n} from '@material-ui/pickers';\n// import { useIntl } from '../../../intl';\n// import { useDateFormat } from '../../utils/CompanyPreferencesProvider';\nimport DateFnsUtils from '@date-io/date-fns';\n\n/**\n * TextField for date input\n */\nexport const DateTimeField = (props) => {\n  const { onChange: onChangeProp, value: valueProp, ...other } = props;\n  // TODO: implement intl, use CPS as reference\n  // const { shortDateFormatString } = useIntl();\n  const dateFormat = 'yyyy-MM-dd HH:mm';\n\n  const isValidDate = (date) => {\n    return date instanceof Date && !isNaN(date);\n  };\n\n  const onChange = useCallback(\n    (value) =>\n      onChangeProp && onChangeProp(isValidDate(value) ? value : undefined),\n    [onChangeProp]\n  );\n\n  const value = useMemo(() => {\n    console.log(valueProp);\n    return isValidDate(valueProp)\n      ? DateTime.fromISO(valueProp.toISOString())\n      : null;\n  }, [valueProp]);\n\n  return (\n    <MuiPickersUtilsProvider utils={DateFnsUtils}>\n      <KeyboardDateTimePicker\n        format={dateFormat}\n        variant='inline'\n        onChange={onChange}\n        value={value}\n        {...other}\n      />\n    </MuiPickersUtilsProvider>\n  );\n};\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiB,UAAU;CACtC,MAAM,EAAE,UAAU,cAAc,OAAO,UAAW,GAAG,UAAU;CAG/D,MAAM,aAAa;CAEnB,MAAM,eAAe,SAAS;AAC5B,SAAO,gBAAgB,QAAQ,CAAC,MAAM,KAAK;;CAG7C,MAAM,WAAW,aACd,YACC,gBAAgB,aAAa,YAAYA,QAAM,GAAGA,UAAQ,OAAU,EACtE,CAAC,aAAa,CACf;CAED,MAAM,QAAQ,cAAc;AAC1B,UAAQ,IAAI,UAAU;AACtB,SAAO,YAAY,UAAU,GACzB,SAAS,QAAQ,UAAU,aAAa,CAAC,GACzC;IACH,CAAC,UAAU,CAAC;AAEf,QACE,oCAAC,2BAAwB,OAAO,gBAC9B,oCAAC;EACC,QAAQ;EACR,SAAQ;EACE;EACH;EACP,GAAI;GACJ,CACsB"}

package/dist/DateUtilities-DHTEYbE8.js

@@ -0,0 +1,15 @@
+import { DateTime } from "luxon";
+
+//#region src/utilities/input/DateUtilities.js
+const formatDateToLocaleString = (isoDate, luxonFormat = "") => {
+	return DateTime.fromISO(isoDate, { zone: "utc" }).toLocal().toLocaleString(luxonFormat);
+};
+const toUtcDate = (date) => {
+	if (!date) return null;
+	if (date.endsWith("Z")) return new Date(date);
+	else return /* @__PURE__ */ new Date(date + "Z");
+};
+
+//#endregion
+export { formatDateToLocaleString, toUtcDate };
+//# sourceMappingURL=DateUtilities-DHTEYbE8.js.map

package/dist/DateUtilities-DHTEYbE8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateUtilities-DHTEYbE8.js","names":[],"sources":["../src/utilities/input/DateUtilities.js"],"sourcesContent":["import { DateTime } from 'luxon';\n\nexport const formatDateToLocaleString = (isoDate, luxonFormat = '') => {\n  return DateTime.fromISO(isoDate, { zone: 'utc' })\n    .toLocal()\n    .toLocaleString(luxonFormat);\n};\n\n// convert date into UTC date format\nexport const toUtcDate = (date) => {\n  if (!date) {\n    return null;\n  }\n\n  if (date.endsWith('Z')) {\n    return new Date(date);\n  } else {\n    return new Date(date + 'Z');\n  }\n};\n"],"mappings":";;;AAEA,MAAa,4BAA4B,SAAS,cAAc,OAAO;AACrE,QAAO,SAAS,QAAQ,SAAS,EAAE,MAAM,OAAO,CAAC,CAC9C,SAAS,CACT,eAAe,YAAY;;AAIhC,MAAa,aAAa,SAAS;AACjC,KAAI,CAAC,KACH,QAAO;AAGT,KAAI,KAAK,SAAS,IAAI,CACpB,QAAO,IAAI,KAAK,KAAK;KAErB,wBAAO,IAAI,KAAK,OAAO,IAAI"}

package/dist/DemoJuly-46P2EFI7.js

@@ -0,0 +1 @@
+export {  };

package/dist/DiffChecker-BZGx08fd.js

@@ -0,0 +1,38 @@
+import { greyScale } from "./verticalStyles-CNJRNnZb.js";
+import React from "react";
+import { lighten, makeStyles, useTheme } from "@material-ui/core";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
+
+//#region src/diffChecker/DiffChecker.jsx
+const useStyles = makeStyles((theme) => ({ root: {} }));
+const DiffChecker = ({ leftTitle, rightTitle, oldValue, newValue }) => {
+	const classes = useStyles();
+	const theme = useTheme();
+	const lightValue = .9;
+	const medValue = .5;
+	const newStyles = { variables: { light: {
+		addedBackground: lighten(theme.palette.success.light, lightValue),
+		removedBackground: lighten(theme.palette.error.light, lightValue),
+		wordAddedBackground: lighten(theme.palette.success.light, medValue),
+		wordRemovedBackground: "#fdb8c0",
+		addedGutterBackground: lighten(theme.palette.success.light, medValue),
+		removedGutterBackground: lighten(theme.palette.error.light, medValue),
+		gutterBackground: greyScale("main"),
+		codeFoldGutterBackground: lighten(theme.palette.primary.main, .8),
+		codeFoldBackground: lighten(theme.palette.primary.main, lightValue),
+		emptyLineBackground: greyScale("light")
+	} } };
+	return /* @__PURE__ */ React.createElement("div", { className: classes.root }, /* @__PURE__ */ React.createElement(ReactDiffViewer, {
+		oldValue,
+		newValue,
+		splitView: true,
+		compareMethod: DiffMethod.WORDS,
+		styles: newStyles,
+		leftTitle,
+		rightTitle
+	}));
+};
+
+//#endregion
+export { DiffChecker };
+//# sourceMappingURL=DiffChecker-BZGx08fd.js.map

package/dist/DiffChecker-BZGx08fd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiffChecker-BZGx08fd.js","names":[],"sources":["../src/diffChecker/DiffChecker.jsx"],"sourcesContent":["import React from 'react'\nimport { makeStyles, useTheme, lighten } from '@material-ui/core'\nimport ReactDiffViewer, { DiffMethod } from 'react-diff-viewer'\nimport { greyScale } from '../utilities/style/verticalStyles'\n\nconst useStyles = makeStyles((theme) => ({\n  root: {}\n}))\n\nexport const DiffChecker = ({ leftTitle, rightTitle, oldValue, newValue }) => {\n  const classes = useStyles()\n  const theme = useTheme()\n\n  const lightValue = 0.9\n  const medValue = 0.5\n\n  const newStyles = {\n    variables: {\n      light: {\n        addedBackground: lighten(theme.palette.success.light, lightValue),\n        removedBackground: lighten(theme.palette.error.light, lightValue),\n        wordAddedBackground: lighten(theme.palette.success.light, medValue),\n        wordRemovedBackground: '#fdb8c0',\n        addedGutterBackground: lighten(theme.palette.success.light, medValue),\n        removedGutterBackground: lighten(theme.palette.error.light, medValue),\n        gutterBackground: greyScale('main'),\n        codeFoldGutterBackground: lighten(theme.palette.primary.main, 0.8),\n        codeFoldBackground: lighten(theme.palette.primary.main, lightValue),\n        emptyLineBackground: greyScale('light')\n      }\n    }\n  }\n\n  return (\n    <div className={classes.root}>\n      <ReactDiffViewer\n        oldValue={oldValue}\n        newValue={newValue}\n        splitView={true}\n        compareMethod={DiffMethod.WORDS}\n        styles={newStyles}\n        leftTitle={leftTitle}\n        rightTitle={rightTitle}\n      />\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAKA,MAAM,YAAY,YAAY,WAAW,EACvC,MAAM,EAAE,EACT,EAAE;AAEH,MAAa,eAAe,EAAE,WAAW,YAAY,UAAU,eAAe;CAC5E,MAAM,UAAU,WAAW;CAC3B,MAAM,QAAQ,UAAU;CAExB,MAAM,aAAa;CACnB,MAAM,WAAW;CAEjB,MAAM,YAAY,EAChB,WAAW,EACT,OAAO;EACL,iBAAiB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,WAAW;EACjE,mBAAmB,QAAQ,MAAM,QAAQ,MAAM,OAAO,WAAW;EACjE,qBAAqB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,SAAS;EACnE,uBAAuB;EACvB,uBAAuB,QAAQ,MAAM,QAAQ,QAAQ,OAAO,SAAS;EACrE,yBAAyB,QAAQ,MAAM,QAAQ,MAAM,OAAO,SAAS;EACrE,kBAAkB,UAAU,OAAO;EACnC,0BAA0B,QAAQ,MAAM,QAAQ,QAAQ,MAAM,GAAI;EAClE,oBAAoB,QAAQ,MAAM,QAAQ,QAAQ,MAAM,WAAW;EACnE,qBAAqB,UAAU,QAAQ;EACxC,EACF,EACF;AAED,QACE,oCAAC,SAAI,WAAW,QAAQ,QACtB,oCAAC;EACW;EACA;EACV,WAAW;EACX,eAAe,WAAW;EAC1B,QAAQ;EACG;EACC;GACZ,CACE"}

package/dist/Divider-BU1-Ll14.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Divider } from "@material-ui/core";
+
+//#region src/UI/utilityDisplay/Divider.jsx
+const Divider$1 = (props) => {
+	return /* @__PURE__ */ React.createElement(Divider, props);
+};
+
+//#endregion
+export { Divider$1 as Divider };
+//# sourceMappingURL=Divider-BU1-Ll14.js.map

package/dist/Divider-BU1-Ll14.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider-BU1-Ll14.js","names":["Divider","MuiDivider"],"sources":["../src/UI/utilityDisplay/Divider.jsx"],"sourcesContent":["import React from \"react\";\nimport { Divider as MuiDivider } from \"@material-ui/core\";\n\nexport const Divider = props => {\n  return (<MuiDivider {...props}/>)\n}"],"mappings":";;;;AAGA,MAAaA,aAAU,UAAS;AAC9B,QAAQ,oCAACC,SAAe,MAAQ"}

package/dist/DragDropFileUpload-D2moCBGI.js

@@ -0,0 +1,89 @@
+import { FluentButton } from "./FluentButton-h_8VjXGT.js";
+import { FluentIcon } from "./FluentIcon-CB-ANF6C.js";
+import { formatBytes } from "./formatBytes-D6vdwZ2k.js";
+import React, { useMemo } from "react";
+import { Typography, lighten, makeStyles } from "@material-ui/core";
+import { PageIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { useDropzone } from "react-dropzone";
+
+//#region src/uploader/DragDropFileUpload.jsx
+const useStyles = makeStyles((theme) => ({
+	btnWrapper: {
+		display: "flex",
+		justifyContent: "center",
+		gap: theme.spacing(2),
+		marginTop: theme.spacing(1),
+		marginBottom: theme.spacing(1)
+	},
+	dndWrapper: {
+		backgroundColor: lighten(theme.palette.secondary.light, .8),
+		height: "100%",
+		minHeight: (props) => props?.minHeight,
+		maxHeight: (props) => props?.maxHeight,
+		display: "flex",
+		alignItems: "center",
+		textAlign: "center",
+		border: `dashed 2px ${lighten(theme.palette.secondary.light, .4)}`,
+		overflow: "hidden"
+	},
+	fileNameWrapper: {
+		display: "flex",
+		gap: theme.spacing(1),
+		alignItems: "center",
+		textAlign: "center",
+		justifyContent: "center"
+	},
+	dndContent: {
+		flexGrow: 1,
+		textAlign: "center"
+	},
+	textWrapper: {
+		overflow: "hidden",
+		marginRight: theme.spacing(2),
+		marginLeft: theme.spacing(2)
+	}
+}));
+const DragDropFileUpload = (props) => {
+	const { title, handleUploadFile, hideSelectFileButton = false, hideFilePreview = false, minHeight, maxHeight, multiple = false,...otherDropZoneProps } = props;
+	const { t } = useTranslation();
+	const classes = useStyles({
+		minHeight,
+		maxHeight
+	});
+	const { open, acceptedFiles, getRootProps, getInputProps } = useDropzone({
+		noClick: true,
+		noKeyboard: true,
+		multiple,
+		onDrop: handleUploadFile,
+		...otherDropZoneProps
+	});
+	const files = useMemo(() => {
+		return acceptedFiles.map((file) => /* @__PURE__ */ React.createElement("div", { className: classes.fileNameWrapper }, /* @__PURE__ */ React.createElement(FluentIcon, {
+			size: "small",
+			component: PageIcon
+		}), /* @__PURE__ */ React.createElement(Typography, null, ` ${file?.path} (${formatBytes(file?.size)})`)));
+	}, [acceptedFiles]);
+	return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", {
+		...getRootProps({ className: "dropzone" }),
+		className: classes.dndWrapper
+	}, /* @__PURE__ */ React.createElement("div", { className: classes.dndContent }, /* @__PURE__ */ React.createElement("input", getInputProps()), /* @__PURE__ */ React.createElement(Typography, { className: classes.textWrapper }, title ? title : multiple ? t("Drag and drop files here or select files") : t("Drag and drop a file here or select a file")), !hideSelectFileButton && /* @__PURE__ */ React.createElement("div", { className: classes.btnWrapper }, /* @__PURE__ */ React.createElement(FluentButton, {
+		onClick: open,
+		color: "secondary",
+		variant: "contained"
+	}, /* @__PURE__ */ React.createElement(Typography, { noWrap: true }, multiple ? t("Select Files") : t("Select a File")))), !hideFilePreview && /* @__PURE__ */ React.createElement("div", null, files))));
+};
+DragDropFileUpload.propTypes = {
+	title: PropTypes.string,
+	handleUploadFile: PropTypes.func,
+	hideSelectFileButton: PropTypes.bool,
+	hideFilePreview: PropTypes.bool,
+	minHeight: PropTypes.string | PropTypes.number,
+	maxHeight: PropTypes.string | PropTypes.number,
+	multiple: PropTypes.bool
+};
+
+//#endregion
+export { DragDropFileUpload };
+//# sourceMappingURL=DragDropFileUpload-D2moCBGI.js.map

package/dist/DragDropFileUpload-D2moCBGI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropFileUpload-D2moCBGI.js","names":[],"sources":["../src/uploader/DragDropFileUpload.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport { useTranslation } from 'react-i18next';\nimport { FluentButton } from '../UI/inputs/buttons/FluentButton';\nimport { FluentIcon } from '../utilities/iconLibrary/FluentIcon';\nimport { formatBytes } from '../utilities/uploader/formatBytes';\nimport { PageIcon } from '@fluentui/react-icons';\nimport { Typography, lighten, makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nconst useStyles = makeStyles((theme) => ({\n  btnWrapper: {\n    display: 'flex',\n    justifyContent: 'center',\n    gap: theme.spacing(2),\n    marginTop: theme.spacing(1),\n    marginBottom: theme.spacing(1)\n  },\n  dndWrapper: {\n    backgroundColor: lighten(theme.palette.secondary.light, 0.8),\n    height: '100%',\n    minHeight: (props) => props?.minHeight,\n    maxHeight: (props) => props?.maxHeight,\n    display: 'flex',\n    alignItems: 'center',\n    textAlign: 'center',\n    border: `dashed 2px ${lighten(theme.palette.secondary.light, 0.4)}`,\n    overflow: 'hidden'\n  },\n  fileNameWrapper: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    alignItems: 'center',\n    textAlign: 'center',\n    justifyContent: 'center'\n  },\n  dndContent: {\n    flexGrow: 1,\n    textAlign: 'center'\n  },\n  textWrapper: {\n    overflow: 'hidden',\n    marginRight: theme.spacing(2),\n    marginLeft: theme.spacing(2)\n  }\n}));\n\nexport const DragDropFileUpload = (props) => {\n  const {\n    title,\n    handleUploadFile,\n    hideSelectFileButton = false,\n    hideFilePreview = false,\n    minHeight,\n    maxHeight,\n    multiple = false,\n    ...otherDropZoneProps\n  } = props;\n  const { t } = useTranslation();\n  const classes = useStyles({ minHeight, maxHeight });\n\n  const { open, acceptedFiles, getRootProps, getInputProps } = useDropzone({\n    noClick: true,\n    noKeyboard: true,\n    multiple: multiple,\n    onDrop: handleUploadFile,\n    ...otherDropZoneProps\n  });\n\n  const files = useMemo(() => {\n    return acceptedFiles.map((file) => (\n      <div className={classes.fileNameWrapper}>\n        <FluentIcon size='small' component={PageIcon} />\n        <Typography>{` ${file?.path} (${formatBytes(file?.size)})`}</Typography>\n      </div>\n    ));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [acceptedFiles]);\n\n  return (\n    <div>\n      <div\n        {...getRootProps({ className: 'dropzone' })}\n        className={classes.dndWrapper}\n      >\n        <div className={classes.dndContent}>\n          <input {...getInputProps()} />\n          <Typography className={classes.textWrapper}>\n            {title\n              ? title\n              : multiple\n              ? t('Drag and drop files here or select files')\n              : t('Drag and drop a file here or select a file')}\n          </Typography>\n          {!hideSelectFileButton && (\n            <div className={classes.btnWrapper}>\n              <FluentButton\n                onClick={open}\n                color='secondary'\n                variant='contained'\n              >\n                <Typography noWrap>\n                  {multiple ? t('Select Files') : t('Select a File')}\n                </Typography>\n              </FluentButton>\n            </div>\n          )}\n          {!hideFilePreview && <div>{files}</div>}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nDragDropFileUpload.propTypes = {\n  /**\n   * Optional, title\n   */\n  title: PropTypes.string,\n\n  /**\n   * Optional, event handler that accept a param (an array of files) when drop or select files.\n   * can use other props to handle this event such as onDropAccepted, onDropRejected.\n   * https://react-dropzone.js.org/#section-components\n   */\n  handleUploadFile: PropTypes.func,\n\n  /**\n   * Optional, hide or show the select file button (default is false)\n   */\n  hideSelectFileButton: PropTypes.bool,\n\n  /**\n   * Optional, hide or show the file sneak preview (default is false)\n   */\n  hideFilePreview: PropTypes.bool,\n\n  /**\n   * Optional, minimum height\n   */\n  minHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, maximum height\n   */\n  maxHeight: PropTypes.string | PropTypes.number,\n\n  /**\n   * Optional, allow to add multiple files at a time (default is false)\n   */\n  multiple: PropTypes.bool\n};\n"],"mappings":";;;;;;;;;;;AAUA,MAAM,YAAY,YAAY,WAAW;CACvC,YAAY;EACV,SAAS;EACT,gBAAgB;EAChB,KAAK,MAAM,QAAQ,EAAE;EACrB,WAAW,MAAM,QAAQ,EAAE;EAC3B,cAAc,MAAM,QAAQ,EAAE;EAC/B;CACD,YAAY;EACV,iBAAiB,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EAC5D,QAAQ;EACR,YAAY,UAAU,OAAO;EAC7B,YAAY,UAAU,OAAO;EAC7B,SAAS;EACT,YAAY;EACZ,WAAW;EACX,QAAQ,cAAc,QAAQ,MAAM,QAAQ,UAAU,OAAO,GAAI;EACjE,UAAU;EACX;CACD,iBAAiB;EACf,SAAS;EACT,KAAK,MAAM,QAAQ,EAAE;EACrB,YAAY;EACZ,WAAW;EACX,gBAAgB;EACjB;CACD,YAAY;EACV,UAAU;EACV,WAAW;EACZ;CACD,aAAa;EACX,UAAU;EACV,aAAa,MAAM,QAAQ,EAAE;EAC7B,YAAY,MAAM,QAAQ,EAAE;EAC7B;CACF,EAAE;AAEH,MAAa,sBAAsB,UAAU;CAC3C,MAAM,EACJ,OACA,kBACA,uBAAuB,OACvB,kBAAkB,OAClB,WACA,WACA,WAAW,MACX,GAAG,uBACD;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,UAAU,UAAU;EAAE;EAAW;EAAW,CAAC;CAEnD,MAAM,EAAE,MAAM,eAAe,cAAc,kBAAkB,YAAY;EACvE,SAAS;EACT,YAAY;EACF;EACV,QAAQ;EACR,GAAG;EACJ,CAAC;CAEF,MAAM,QAAQ,cAAc;AAC1B,SAAO,cAAc,KAAK,SACxB,oCAAC,SAAI,WAAW,QAAQ,mBACtB,oCAAC;GAAW,MAAK;GAAQ,WAAW;IAAY,EAChD,oCAAC,kBAAY,IAAI,MAAM,KAAK,IAAI,YAAY,MAAM,KAAK,CAAC,GAAgB,CACpE,CACN;IAED,CAAC,cAAc,CAAC;AAEnB,QACE,oCAAC,aACC,oCAAC;EACC,GAAI,aAAa,EAAE,WAAW,YAAY,CAAC;EAC3C,WAAW,QAAQ;IAEnB,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC,SAAU,eAAe,CAAI,EAC9B,oCAAC,cAAW,WAAW,QAAQ,eAC5B,QACG,QACA,WACA,EAAE,2CAA2C,GAC7C,EAAE,6CAA6C,CACxC,EACZ,CAAC,wBACA,oCAAC,SAAI,WAAW,QAAQ,cACtB,oCAAC;EACC,SAAS;EACT,OAAM;EACN,SAAQ;IAER,oCAAC,cAAW,gBACT,WAAW,EAAE,eAAe,GAAG,EAAE,gBAAgB,CACvC,CACA,CACX,EAEP,CAAC,mBAAmB,oCAAC,aAAK,MAAY,CACnC,CACF,CACF;;AAIV,mBAAmB,YAAY;CAI7B,OAAO,UAAU;CAOjB,kBAAkB,UAAU;CAK5B,sBAAsB,UAAU;CAKhC,iBAAiB,UAAU;CAK3B,WAAW,UAAU,SAAS,UAAU;CAKxC,WAAW,UAAU,SAAS,UAAU;CAKxC,UAAU,UAAU;CACrB"}

package/dist/DraggableSidebarTemplate-Dhrbn1H1.js

@@ -0,0 +1,93 @@
+import React, { useEffect } from "react";
+import { Container, makeStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { Resizable } from "re-resizable";
+
+//#region src/UI/templates/OpenPage.jsx
+const useStyles$1 = makeStyles((theme) => ({ root: {
+	flex: 1,
+	display: "flex",
+	flexDirection: "column",
+	position: "absolute",
+	top: 93
+} }), { name: "PageContent" });
+/**
+* Page content wrapper that provides page gutters and container
+*/
+const OpenPage = (props) => {
+	const classes = useStyles$1(props);
+	const { className, children, maxWidth = false, disableGutters = false,...other } = props;
+	return /* @__PURE__ */ React.createElement(Container, {
+		...other,
+		classes: null,
+		className: clsx(className, classes.root),
+		maxWidth,
+		disableGutters
+	}, children);
+};
+
+//#endregion
+//#region src/UI/templates/DraggableSidebarTemplate.jsx
+const useStyles = makeStyles((theme) => ({
+	root: {},
+	stage: {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		width: "100%",
+		marginTop: 16,
+		gap: 16
+	},
+	gridColumn: {
+		width: "100%",
+		height: "100vh",
+		border: 0
+	},
+	arrow: { transform: "rotate(180deg)" },
+	buttonContainer: {
+		background: theme.palette.common.white,
+		borderRadius: "50px 0px 0px 50px",
+		marginTop: theme.spacing(1),
+		height: 39,
+		paddingTop: (props) => props.removePadding ? 0 : 10
+	},
+	hide: { display: "none" }
+}));
+const DraggableSidebarTemplate = (props) => {
+	const { body, sidebar, divide, width, setWidth, handleToggleClick, handleToggleClickClose, expanded, hideSidebarButton, hide, maxWidth, enable = {
+		top: true,
+		right: true,
+		bottom: true,
+		left: true,
+		topRight: false,
+		bottomRight: false,
+		bottomLeft: false,
+		topLeft: false
+	}, splitScreenStyle = {} } = props;
+	const classes = useStyles(props);
+	return /* @__PURE__ */ React.createElement("div", { style: {
+		width: "100%",
+		display: "flex",
+		overflow: !hide && "hidden",
+		border: 0
+	} }, /* @__PURE__ */ React.createElement(OpenPage, {
+		disableGutters: true,
+		style: {
+			position: "relative",
+			top: 0
+		}
+	}, /* @__PURE__ */ React.createElement("div", { className: divide && classes.stage }, /* @__PURE__ */ React.createElement("div", null, body))), /* @__PURE__ */ React.createElement("div", { className: divide && classes.stage }), !hide && /* @__PURE__ */ React.createElement(Resizable, {
+		style: splitScreenStyle,
+		onResizeStop: (e, direction, ref, d) => {
+			setWidth(width + d.width);
+		},
+		defaultSize: { width },
+		size: { width },
+		maxWidth: maxWidth || "50%",
+		enable
+	}, sidebar));
+};
+
+//#endregion
+export { DraggableSidebarTemplate, OpenPage };
+//# sourceMappingURL=DraggableSidebarTemplate-Dhrbn1H1.js.map

package/dist/DraggableSidebarTemplate-Dhrbn1H1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DraggableSidebarTemplate-Dhrbn1H1.js","names":["useStyles"],"sources":["../src/UI/templates/OpenPage.jsx","../src/UI/templates/DraggableSidebarTemplate.jsx"],"sourcesContent":["import clsx from 'clsx'\nimport { makeStyles, Container } from '@material-ui/core'\nimport React from 'react'\n\nconst useStyles = makeStyles(\n  (theme) => ({\n    root: {\n      flex: 1,\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'absolute',\n      top: 93\n    }\n  }),\n  { name: 'PageContent' }\n)\n\n/**\n * Page content wrapper that provides page gutters and container\n */\nexport const OpenPage = (props) => {\n  const classes = useStyles(props)\n  const {\n    className,\n    children,\n    maxWidth = false,\n    disableGutters = false,\n    ...other\n  } = props\n\n  return (\n    <Container\n      {...other}\n      classes={null}\n      className={clsx(className, classes.root)}\n      maxWidth={maxWidth}\n      disableGutters={disableGutters}\n    >\n      {children}\n    </Container>\n  )\n}\n","import React, { useEffect } from 'react';\nimport { Resizable } from 're-resizable';\nimport { makeStyles } from '@material-ui/core';\nimport { SidebarCollapseButton } from '../../shell/ui/SidebarCollapseButton';\nimport { OpenPage } from '../templates/OpenPage';\nimport clsx from 'clsx';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {},\n  stage: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n    marginTop: 16,\n    gap: 16\n  },\n  gridColumn: {\n    width: '100%',\n    height: '100vh',\n    border: 0\n  },\n  arrow: {\n    transform: 'rotate(180deg)'\n  },\n  buttonContainer: {\n    background: theme.palette.common.white,\n    borderRadius: '50px 0px 0px 50px',\n    marginTop: theme.spacing(1),\n    height: 39,\n    // @todo: fix this padding hack\n    paddingTop: (props) => (props.removePadding ? 0 : 10)\n  },\n  hide: {\n    display: 'none'\n  }\n}));\n\nexport const DraggableSidebarTemplate = (props) => {\n  const {\n    body,\n    sidebar,\n    divide,\n    width,\n    setWidth,\n    handleToggleClick,\n    handleToggleClickClose,\n    expanded,\n    hideSidebarButton,\n    hide,\n    maxWidth,\n    enable = {\n      top: true,\n      right: true,\n      bottom: true,\n      left: true,\n      topRight: false,\n      bottomRight: false,\n      bottomLeft: false,\n      topLeft: false\n    },\n    splitScreenStyle = {}\n  } = props;\n\n  const classes = useStyles(props);\n\n  return (\n    <div\n      style={{\n        width: '100%',\n        display: 'flex',\n        overflow: !hide && 'hidden',\n        border: 0\n      }}\n    >\n      <OpenPage\n        disableGutters={true}\n        style={{\n          position: 'relative',\n          top: 0\n        }}\n      >\n        <div className={divide && classes.stage}>\n          <div>{body}</div>\n        </div>\n      </OpenPage>\n      <div className={divide && classes.stage} />\n      {/* <div\n        className={clsx(\n          classes.buttonContainer,\n          hideSidebarButton && classes.hide\n        )}\n      >\n        <SidebarCollapseButton\n          className={classes.arrow}\n          expanded={expanded}\n          onClick={\n            expanded ? () => handleToggleClick(0) : () => handleToggleClick(1)\n          }\n        />\n      </div> */}\n\n      {!hide && (\n        <Resizable\n          style={splitScreenStyle}\n          onResizeStop={(e, direction, ref, d) => {\n            setWidth(width + d.width);\n          }}\n          defaultSize={{\n            width: width\n          }}\n          size={{\n            width: width\n          }}\n          maxWidth={maxWidth || '50%'}\n          enable={enable}\n        >\n          {sidebar}\n        </Resizable>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAIA,MAAMA,cAAY,YACf,WAAW,EACV,MAAM;CACJ,MAAM;CACN,SAAS;CACT,eAAe;CACf,UAAU;CACV,KAAK;CACN,EACF,GACD,EAAE,MAAM,eAAe,CACxB;;;;AAKD,MAAa,YAAY,UAAU;CACjC,MAAM,UAAUA,YAAU,MAAM;CAChC,MAAM,EACJ,WACA,UACA,WAAW,OACX,iBAAiB,MACjB,GAAG,UACD;AAEJ,QACE,oCAAC;EACC,GAAI;EACJ,SAAS;EACT,WAAW,KAAK,WAAW,QAAQ,KAAK;EAC9B;EACM;IAEf,SACS;;;;;AChChB,MAAM,YAAY,YAAY,WAAW;CACvC,MAAM,EAAE;CACR,OAAO;EACL,SAAS;EACT,eAAe;EACf,YAAY;EACZ,OAAO;EACP,WAAW;EACX,KAAK;EACN;CACD,YAAY;EACV,OAAO;EACP,QAAQ;EACR,QAAQ;EACT;CACD,OAAO,EACL,WAAW,kBACZ;CACD,iBAAiB;EACf,YAAY,MAAM,QAAQ,OAAO;EACjC,cAAc;EACd,WAAW,MAAM,QAAQ,EAAE;EAC3B,QAAQ;EAER,aAAa,UAAW,MAAM,gBAAgB,IAAI;EACnD;CACD,MAAM,EACJ,SAAS,QACV;CACF,EAAE;AAEH,MAAa,4BAA4B,UAAU;CACjD,MAAM,EACJ,MACA,SACA,QACA,OACA,UACA,mBACA,wBACA,UACA,mBACA,MACA,UACA,SAAS;EACP,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;EACN,UAAU;EACV,aAAa;EACb,YAAY;EACZ,SAAS;EACV,EACD,mBAAmB,EAAE,KACnB;CAEJ,MAAM,UAAU,UAAU,MAAM;AAEhC,QACE,oCAAC,SACC,OAAO;EACL,OAAO;EACP,SAAS;EACT,UAAU,CAAC,QAAQ;EACnB,QAAQ;EACT,IAED,oCAAC;EACC,gBAAgB;EAChB,OAAO;GACL,UAAU;GACV,KAAK;GACN;IAED,oCAAC,SAAI,WAAW,UAAU,QAAQ,SAChC,oCAAC,aAAK,KAAW,CACb,CACG,EACX,oCAAC,SAAI,WAAW,UAAU,QAAQ,QAAS,EAgB1C,CAAC,QACA,oCAAC;EACC,OAAO;EACP,eAAe,GAAG,WAAW,KAAK,MAAM;AACtC,YAAS,QAAQ,EAAE,MAAM;;EAE3B,aAAa,EACJ,OACR;EACD,MAAM,EACG,OACR;EACD,UAAU,YAAY;EACd;IAEP,QACS,CAEV"}

package/dist/DynamicContainerWithMenu-CQLpIY2A.js

@@ -0,0 +1,141 @@
+import { AmbientTokenButton } from "./AmbientTokenButton-CpdlLmsF.js";
+import { useDynamicListCalculation } from "./useDynamicListCalculation-B4erIwyM.js";
+import React, { Children, cloneElement, forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { MenuItem, Popover } from "@material-ui/core";
+import { MoreVerticalIcon } from "@fluentui/react-icons";
+import PropTypes from "prop-types";
+import { makeStyles as makeStyles$1 } from "@material-ui/core/styles";
+
+//#region src/UI/containers/DynamicContainerWithMenu.jsx
+const useStyles = makeStyles$1((theme) => ({ filterChipMenuIcon: {
+	background: theme.palette.common.grey,
+	padding: theme.spacing(1),
+	color: theme.palette.primary.main
+} }));
+const DynamicContainerWithMenu = forwardRef((props, ref) => {
+	const { children, className, menuButton, menuIconClassName, includeBuffer = true } = props;
+	const classes = useStyles();
+	const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();
+	const modifiedMenuButton = useMemo(() => {
+		if (!menuButton) return null;
+		return cloneElement(menuButton, {
+			onClick: (event) => {
+				menuButton.props.onClick(event);
+				handlePopoverClick(event);
+			},
+			...menuButton.props
+		}, menuButton.props.children);
+	}, [menuButton]);
+	const [allChildren, setAllChildren] = useState([]);
+	const [visibleChildren, setVisibleChildren] = useState([]);
+	const [menuChildren, setMenuChildren] = useState([]);
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const id = open ? "simple-popover" : void 0;
+	const containerRef = useRef(ref);
+	const outerContainerRef = useRef(null);
+	const childrenRefs = useRef([]);
+	const handlePopoverClick = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
+	const handleSizeChange = useCallback(() => {
+		const maxVisibleChildren = calculateNumberOfVisibleChildren(containerRef, childrenRefs, includeBuffer);
+		const visibleChildren$1 = allChildren.slice(0, maxVisibleChildren);
+		const menuChildren$1 = allChildren.slice(maxVisibleChildren);
+		setVisibleChildren(visibleChildren$1);
+		setMenuChildren(menuChildren$1);
+	}, [
+		containerRef,
+		allChildren,
+		childrenRefs,
+		calculateNumberOfVisibleChildren,
+		includeBuffer
+	]);
+	const handleMenuItemClick = useCallback((child) => {
+		if (child.props.onClick && typeof child.props.onClick === "function") child.props.onClick();
+		let children$1 = child.props.children;
+		while (children$1) {
+			if (Array.isArray(children$1) && children$1.length > 0) children$1.forEach((child$1) => {
+				if (child$1.props.onClick && typeof child$1.props.onClick === "function") child$1.props.onClick();
+			});
+			else if (typeof children$1 === "object") {
+				if (children$1.props.onClick && typeof children$1.props.onClick === "function") children$1.props.onClick();
+			}
+			children$1 = children$1.props.children;
+		}
+		handlePopoverClose();
+	}, []);
+	useEffect(() => {
+		const arrayChildren = Children.toArray(children);
+		setAllChildren(arrayChildren);
+		setVisibleChildren(arrayChildren);
+	}, [children]);
+	useLayoutEffect(handleSizeChange, [handleSizeChange]);
+	useLayoutEffect(() => {
+		window.addEventListener("resize", handleSizeChange);
+		const resizeObserver = new ResizeObserver(handleSizeChange);
+		if (outerContainerRef.current) resizeObserver.observe(outerContainerRef.current);
+		return () => {
+			window.removeEventListener("resize", handleSizeChange);
+			resizeObserver.disconnect();
+		};
+	}, [handleSizeChange, outerContainerRef]);
+	return /* @__PURE__ */ React.createElement("div", {
+		ref: outerContainerRef,
+		style: {
+			width: "100%",
+			overflow: "hidden"
+		}
+	}, /* @__PURE__ */ React.createElement("div", {
+		className,
+		ref: containerRef,
+		style: {
+			display: "flex",
+			flexWrap: "noWrap",
+			overflow: "hidden",
+			flexGrow: 1
+		}
+	}, visibleChildren && Children.map(visibleChildren, (child, index) => {
+		return cloneElement(child, {
+			ref: (ref$1) => childrenRefs.current[index] = ref$1,
+			...child.props
+		}, child.props.children);
+	}), menuChildren && menuChildren.length > 0 && /* @__PURE__ */ React.createElement("div", null, modifiedMenuButton ?? /* @__PURE__ */ React.createElement(AmbientTokenButton, {
+		id,
+		icon: MoreVerticalIcon,
+		tooltip: "Additional Filter Values",
+		ariaLabel: "Additional Filter Values",
+		onClick: handlePopoverClick,
+		iconClassName: menuIconClassName ?? classes.filterChipMenuIcon
+	}), /* @__PURE__ */ React.createElement(Popover, {
+		id,
+		open,
+		anchorEl,
+		onClose: handlePopoverClose,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		}
+	}, Children.map(menuChildren, (child, index) => {
+		return /* @__PURE__ */ React.createElement(MenuItem, { onClick: () => handleMenuItemClick(child) }, cloneElement(child, { ...child.props }, child.props.children));
+	})))));
+});
+DynamicContainerWithMenu.displayName = "DynamicContainerWithMenu";
+DynamicContainerWithMenu.propTypes = {
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	menuButton: PropTypes.node,
+	menuIconClassName: PropTypes.string,
+	includeBuffer: PropTypes.bool
+};
+
+//#endregion
+export { DynamicContainerWithMenu };
+//# sourceMappingURL=DynamicContainerWithMenu-CQLpIY2A.js.map

package/dist/DynamicContainerWithMenu-CQLpIY2A.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicContainerWithMenu-CQLpIY2A.js","names":["makeStyles","visibleChildren","menuChildren","children","child","ref"],"sources":["../src/UI/containers/DynamicContainerWithMenu.jsx"],"sourcesContent":["import { MoreVerticalIcon } from '@fluentui/react-icons';\nimport { MenuItem, Popover } from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport React, {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\nimport { useDynamicListCalculation } from '../../hooks/useDynamicListCalculation';\nimport { AmbientTokenButton } from '../inputs/buttons/AmbientTokenButton';\n\nconst useStyles = makeStyles((theme) => ({\n  filterChipMenuIcon: {\n    background: theme.palette.common.grey,\n    padding: theme.spacing(1),\n    color: theme.palette.primary.main\n  }\n}));\n\nexport const DynamicContainerWithMenu = forwardRef((props, ref) => {\n  // ################### Props ###################\n  const {\n    children,\n    className,\n    menuButton,\n    menuIconClassName,\n    includeBuffer = true\n  } = props;\n\n  // ################### Custom Hooks ###################\n  const classes = useStyles();\n  const { calculateNumberOfVisibleChildren } = useDynamicListCalculation();\n\n  // ################### Memoized Values ###################\n  const modifiedMenuButton = useMemo(() => {\n    if (!menuButton) return null;\n\n    return cloneElement(\n      menuButton,\n      {\n        onClick: (event) => {\n          menuButton.props.onClick(event);\n          handlePopoverClick(event);\n        },\n        ...menuButton.props\n      },\n      menuButton.props.children\n    );\n  }, [menuButton]);\n\n  // ################### States ###################\n  const [allChildren, setAllChildren] = useState([]);\n  const [visibleChildren, setVisibleChildren] = useState([]);\n  const [menuChildren, setMenuChildren] = useState([]);\n  const [anchorEl, setAnchorEl] = useState(null);\n\n  // ################### Variables ###################\n  const open = Boolean(anchorEl);\n  const id = open ? 'simple-popover' : undefined;\n\n  // ################### Refs ###################\n  const containerRef = useRef(ref);\n  const outerContainerRef = useRef(null);\n  const childrenRefs = useRef([]);\n\n  // ################### Functions ###################\n  const handlePopoverClick = (event) => {\n    setAnchorEl(event.currentTarget);\n  };\n\n  const handlePopoverClose = () => {\n    setAnchorEl(null);\n  };\n\n  // ################### Callbacks ###################\n  const handleSizeChange = useCallback(() => {\n    const maxVisibleChildren = calculateNumberOfVisibleChildren(\n      containerRef,\n      childrenRefs,\n      includeBuffer\n    );\n\n    const visibleChildren = allChildren.slice(0, maxVisibleChildren);\n    const menuChildren = allChildren.slice(maxVisibleChildren);\n\n    setVisibleChildren(visibleChildren);\n    setMenuChildren(menuChildren);\n  }, [\n    containerRef,\n    allChildren,\n    childrenRefs,\n    calculateNumberOfVisibleChildren,\n    includeBuffer\n  ]);\n\n  const handleMenuItemClick = useCallback((child) => {\n    if (child.props.onClick && typeof child.props.onClick === 'function') {\n      child.props.onClick();\n    }\n\n    // If the child has children, then call the onClick function for each child\n    let children = child.props.children;\n    while (children) {\n      if (Array.isArray(children) && children.length > 0) {\n        children.forEach((child) => {\n          if (\n            child.props.onClick &&\n            typeof child.props.onClick === 'function'\n          ) {\n            child.props.onClick();\n          }\n        });\n      } else if (typeof children === 'object') {\n        if (\n          children.props.onClick &&\n          typeof children.props.onClick === 'function'\n        ) {\n          children.props.onClick();\n        }\n      }\n\n      children = children.props.children;\n    }\n\n    handlePopoverClose();\n  }, []);\n\n  // ################### Effects ###################\n  useEffect(() => {\n    const arrayChildren = Children.toArray(children);\n    setAllChildren(arrayChildren);\n    setVisibleChildren(arrayChildren);\n  }, [children]);\n\n  useLayoutEffect(handleSizeChange, [handleSizeChange]);\n\n  useLayoutEffect(() => {\n    // Add the resize event listener for when the browser window is resized\n    window.addEventListener('resize', handleSizeChange);\n    // Add the resize observer for when the parent div is resized\n    const resizeObserver = new ResizeObserver(handleSizeChange);\n    if (outerContainerRef.current) {\n      resizeObserver.observe(outerContainerRef.current);\n    }\n\n    // Remove the event listeners on cleanup\n    return () => {\n      window.removeEventListener('resize', handleSizeChange);\n      resizeObserver.disconnect();\n    };\n  }, [handleSizeChange, outerContainerRef]);\n\n  // ################### Render ###################\n  return (\n    <div\n      ref={outerContainerRef}\n      style={{\n        width: '100%',\n        overflow: 'hidden'\n      }}\n    >\n      <div\n        className={className}\n        ref={containerRef}\n        style={{\n          display: 'flex',\n          flexWrap: 'noWrap',\n          overflow: 'hidden',\n          flexGrow: 1\n        }}\n      >\n        {visibleChildren &&\n          Children.map(visibleChildren, (child, index) => {\n            return cloneElement(\n              child,\n              {\n                ref: (ref) => (childrenRefs.current[index] = ref),\n                ...child.props\n              },\n              child.props.children\n            );\n          })}\n        {menuChildren && menuChildren.length > 0 && (\n          <div>\n            {modifiedMenuButton ?? (\n              <AmbientTokenButton\n                id={id}\n                icon={MoreVerticalIcon}\n                tooltip='Additional Filter Values'\n                ariaLabel='Additional Filter Values'\n                onClick={handlePopoverClick}\n                iconClassName={menuIconClassName ?? classes.filterChipMenuIcon}\n              />\n            )}\n            <Popover\n              id={id}\n              open={open}\n              anchorEl={anchorEl}\n              onClose={handlePopoverClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'right'\n              }}\n              transformOrigin={{\n                vertical: 'top',\n                horizontal: 'right'\n              }}\n            >\n              {Children.map(menuChildren, (child, index) => {\n                return (\n                  <MenuItem onClick={() => handleMenuItemClick(child)}>\n                    {cloneElement(\n                      child,\n                      {\n                        ...child.props\n                      },\n                      child.props.children\n                    )}\n                  </MenuItem>\n                );\n              })}\n            </Popover>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n});\n\nDynamicContainerWithMenu.displayName = 'DynamicContainerWithMenu';\nDynamicContainerWithMenu.propTypes = {\n  /**\n   * The children to render in the container\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * A className to apply to the container\n   */\n  className: PropTypes.string,\n  /**\n   * A custom menu button to use instead of the default\n   */\n  menuButton: PropTypes.node,\n  /**\n   * A custom class to apply to the menu icon\n   */\n  menuIconClassName: PropTypes.string,\n  /**\n   * Whether to include a space buffer between the menu button and container border (default: true)\n   * @default true\n   */\n  includeBuffer: PropTypes.bool\n};\n"],"mappings":"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"}