@itwin/components-react 4.17.1 → 5.0.0-dev.2

package/lib/components-react/converters/TypeConverterManager.js

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module TypeConverters
+ */
+import { StringTypeConverter } from "./StringTypeConverter.js";
+/**
+ * Manages Type Converters. Type Converters are registered with and obtained from the manager.
+ * @public
+ */
+export class TypeConverterManager {
+    static getFullConverterName(typename, converterName) {
+        let fullConverterName = typename;
+        if (converterName)
+            fullConverterName += `:${converterName}`;
+        return fullConverterName;
+    }
+    static registerConverter(typename, converter, converterName) {
+        const fullConverterName = TypeConverterManager.getFullConverterName(typename, converterName);
+        if (TypeConverterManager._converters.hasOwnProperty(fullConverterName)) {
+            const nameOfConverter = TypeConverterManager._converters[fullConverterName].constructor.name;
+            throw Error(`TypeConverterManager.registerConverter error: type '${typename}' already registered to '${nameOfConverter}'`);
+        }
+        const instance = new converter();
+        TypeConverterManager._converters[fullConverterName] = instance;
+    }
+    static unregisterConverter(typename, converterName) {
+        const fullConverterName = TypeConverterManager.getFullConverterName(typename, converterName);
+        if (TypeConverterManager._converters.hasOwnProperty(fullConverterName)) {
+            delete TypeConverterManager._converters[fullConverterName];
+        }
+    }
+    static getConverter(typename, converterName) {
+        const fullConverterName = TypeConverterManager.getFullConverterName(typename, converterName);
+        if (TypeConverterManager._converters.hasOwnProperty(fullConverterName))
+            return TypeConverterManager._converters[fullConverterName];
+        if (!TypeConverterManager._defaultTypeConverter) {
+            TypeConverterManager._defaultTypeConverter = new StringTypeConverter();
+        }
+        return TypeConverterManager._defaultTypeConverter;
+    }
+}
+TypeConverterManager._converters = {};
+//# sourceMappingURL=TypeConverterManager.js.map

package/lib/components-react/converters/TypeConverterManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TypeConverterManager.js","sourceRoot":"","sources":["../../../src/components-react/converters/TypeConverterManager.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAGH,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D;;;GAGG;AACH,MAAM,OAAO,oBAAoB;IAIvB,MAAM,CAAC,oBAAoB,CACjC,QAAgB,EAChB,aAAsB;QAEtB,IAAI,iBAAiB,GAAG,QAAQ,CAAC;QACjC,IAAI,aAAa;YAAE,iBAAiB,IAAI,IAAI,aAAa,EAAE,CAAC;QAC5D,OAAO,iBAAiB,CAAC;IAC3B,CAAC;IAEM,MAAM,CAAC,iBAAiB,CAC7B,QAAgB,EAChB,SAAkC,EAClC,aAAsB;QAEtB,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,oBAAoB,CACjE,QAAQ,EACR,aAAa,CACd,CAAC;QAEF,IAAI,oBAAoB,CAAC,WAAW,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACvE,MAAM,eAAe,GACnB,oBAAoB,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC;YACvE,MAAM,KAAK,CACT,uDAAuD,QAAQ,4BAA4B,eAAe,GAAG,CAC9G,CAAC;QACJ,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,SAAS,EAAE,CAAC;QACjC,oBAAoB,CAAC,WAAW,CAAC,iBAAiB,CAAC,GAAG,QAAQ,CAAC;IACjE,CAAC;IAEM,MAAM,CAAC,mBAAmB,CAC/B,QAAgB,EAChB,aAAsB;QAEtB,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,oBAAoB,CACjE,QAAQ,EACR,aAAa,CACd,CAAC;QAEF,IAAI,oBAAoB,CAAC,WAAW,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,CAAC;YACvE,OAAO,oBAAoB,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAEM,MAAM,CAAC,YAAY,CACxB,QAAgB,EAChB,aAAsB;QAEtB,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,oBAAoB,CACjE,QAAQ,EACR,aAAa,CACd,CAAC;QAEF,IAAI,oBAAoB,CAAC,WAAW,CAAC,cAAc,CAAC,iBAAiB,CAAC;YACpE,OAAO,oBAAoB,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;QAE7D,IAAI,CAAC,oBAAoB,CAAC,qBAAqB,EAAE,CAAC;YAChD,oBAAoB,CAAC,qBAAqB,GAAG,IAAI,mBAAmB,EAAE,CAAC;QACzE,CAAC;QACD,OAAO,oBAAoB,CAAC,qBAAqB,CAAC;IACpD,CAAC;;AAhEc,gCAAW,GAAuC,EAAE,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module TypeConverters\n */\n\nimport type { TypeConverter } from \"./TypeConverter.js\";\nimport { StringTypeConverter } from \"./StringTypeConverter.js\";\n\n/**\n * Manages Type Converters. Type Converters are registered with and obtained from the manager.\n * @public\n */\nexport class TypeConverterManager {\n  private static _converters: { [index: string]: TypeConverter } = {};\n  private static _defaultTypeConverter: TypeConverter;\n\n  private static getFullConverterName(\n    typename: string,\n    converterName?: string\n  ): string {\n    let fullConverterName = typename;\n    if (converterName) fullConverterName += `:${converterName}`;\n    return fullConverterName;\n  }\n\n  public static registerConverter(\n    typename: string,\n    converter: new () => TypeConverter,\n    converterName?: string\n  ): void {\n    const fullConverterName = TypeConverterManager.getFullConverterName(\n      typename,\n      converterName\n    );\n\n    if (TypeConverterManager._converters.hasOwnProperty(fullConverterName)) {\n      const nameOfConverter =\n        TypeConverterManager._converters[fullConverterName].constructor.name;\n      throw Error(\n        `TypeConverterManager.registerConverter error: type '${typename}' already registered to '${nameOfConverter}'`\n      );\n    }\n\n    const instance = new converter();\n    TypeConverterManager._converters[fullConverterName] = instance;\n  }\n\n  public static unregisterConverter(\n    typename: string,\n    converterName?: string\n  ): void {\n    const fullConverterName = TypeConverterManager.getFullConverterName(\n      typename,\n      converterName\n    );\n\n    if (TypeConverterManager._converters.hasOwnProperty(fullConverterName)) {\n      delete TypeConverterManager._converters[fullConverterName];\n    }\n  }\n\n  public static getConverter(\n    typename: string,\n    converterName?: string\n  ): TypeConverter {\n    const fullConverterName = TypeConverterManager.getFullConverterName(\n      typename,\n      converterName\n    );\n\n    if (TypeConverterManager._converters.hasOwnProperty(fullConverterName))\n      return TypeConverterManager._converters[fullConverterName];\n\n    if (!TypeConverterManager._defaultTypeConverter) {\n      TypeConverterManager._defaultTypeConverter = new StringTypeConverter();\n    }\n    return TypeConverterManager._defaultTypeConverter;\n  }\n}\n"]}

package/lib/components-react/converters/registerConverters.d.ts

@@ -0,0 +1,6 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+/** @internal */
+export declare function registerConverters(): void;
+//# sourceMappingURL=registerConverters.d.ts.map

package/lib/components-react/converters/registerConverters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerConverters.d.ts","sourceRoot":"","sources":["../../../src/components-react/converters/registerConverters.ts"],"names":[],"mappings":"AAIA;;GAEG;AAuBH,gBAAgB;AAChB,wBAAgB,kBAAkB,SAqFjC"}

package/lib/components-react/converters/registerConverters.js

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import { StandardTypeNames } from "@itwin/appui-abstract";
+import { TypeConverterManager } from "./TypeConverterManager.js";
+import { BooleanTypeConverter } from "./BooleanTypeConverter.js";
+import { CompositeTypeConverter } from "./CompositeTypeConverter.js";
+import { DateTimeTypeConverter, ShortDateTypeConverter, } from "./DateTimeTypeConverter.js";
+import { EnumTypeConverter } from "./EnumTypeConverter.js";
+import { HexadecimalTypeConverter } from "./HexadecimalTypeConverter.js";
+import { NavigationPropertyTypeConverter } from "./NavigationPropertyTypeConverter.js";
+import { FloatTypeConverter, IntTypeConverter, } from "./NumericTypeConverter.js";
+import { Point2dTypeConverter, Point3dTypeConverter, } from "./PointTypeConverter.js";
+import { StringTypeConverter } from "./StringTypeConverter.js";
+/** @internal */
+export function registerConverters() {
+    TypeConverterManager.registerConverter(StandardTypeNames.Boolean, BooleanTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Bool, BooleanTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Int, IntTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Integer, IntTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Float, FloatTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Double, FloatTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Number, FloatTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Text, StringTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.String, StringTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.URL, StringTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Composite, CompositeTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.ShortDate, ShortDateTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.DateTime, DateTimeTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Enum, EnumTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Hex, HexadecimalTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Hexadecimal, HexadecimalTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Navigation, NavigationPropertyTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Point2d, Point2dTypeConverter);
+    TypeConverterManager.registerConverter(StandardTypeNames.Point3d, Point3dTypeConverter);
+}
+//# sourceMappingURL=registerConverters.js.map

package/lib/components-react/converters/registerConverters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerConverters.js","sourceRoot":"","sources":["../../../src/components-react/converters/registerConverters.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EACL,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,OAAO,EACL,kBAAkB,EAClB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,gBAAgB;AAChB,MAAM,UAAU,kBAAkB;IAChC,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,OAAO,EACzB,oBAAoB,CACrB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,IAAI,EACtB,oBAAoB,CACrB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,GAAG,EACrB,gBAAgB,CACjB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,OAAO,EACzB,gBAAgB,CACjB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,KAAK,EACvB,kBAAkB,CACnB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,MAAM,EACxB,kBAAkB,CACnB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,MAAM,EACxB,kBAAkB,CACnB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,IAAI,EACtB,mBAAmB,CACpB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,MAAM,EACxB,mBAAmB,CACpB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,GAAG,EACrB,mBAAmB,CACpB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,SAAS,EAC3B,sBAAsB,CACvB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,SAAS,EAC3B,sBAAsB,CACvB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,QAAQ,EAC1B,qBAAqB,CACtB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,IAAI,EACtB,iBAAiB,CAClB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,GAAG,EACrB,wBAAwB,CACzB,CAAC;IACF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,WAAW,EAC7B,wBAAwB,CACzB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,UAAU,EAC5B,+BAA+B,CAChC,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,OAAO,EACzB,oBAAoB,CACrB,CAAC;IAEF,oBAAoB,CAAC,iBAAiB,CACpC,iBAAiB,CAAC,OAAO,EACzB,oBAAoB,CACrB,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport { StandardTypeNames } from \"@itwin/appui-abstract\";\nimport { TypeConverterManager } from \"./TypeConverterManager.js\";\nimport { BooleanTypeConverter } from \"./BooleanTypeConverter.js\";\nimport { CompositeTypeConverter } from \"./CompositeTypeConverter.js\";\nimport {\n  DateTimeTypeConverter,\n  ShortDateTypeConverter,\n} from \"./DateTimeTypeConverter.js\";\nimport { EnumTypeConverter } from \"./EnumTypeConverter.js\";\nimport { HexadecimalTypeConverter } from \"./HexadecimalTypeConverter.js\";\nimport { NavigationPropertyTypeConverter } from \"./NavigationPropertyTypeConverter.js\";\nimport {\n  FloatTypeConverter,\n  IntTypeConverter,\n} from \"./NumericTypeConverter.js\";\nimport {\n  Point2dTypeConverter,\n  Point3dTypeConverter,\n} from \"./PointTypeConverter.js\";\nimport { StringTypeConverter } from \"./StringTypeConverter.js\";\n\n/** @internal */\nexport function registerConverters() {\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Boolean,\n    BooleanTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Bool,\n    BooleanTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Int,\n    IntTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Integer,\n    IntTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Float,\n    FloatTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Double,\n    FloatTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Number,\n    FloatTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Text,\n    StringTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.String,\n    StringTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.URL,\n    StringTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Composite,\n    CompositeTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.ShortDate,\n    ShortDateTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.DateTime,\n    DateTimeTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Enum,\n    EnumTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Hex,\n    HexadecimalTypeConverter\n  );\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Hexadecimal,\n    HexadecimalTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Navigation,\n    NavigationPropertyTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Point2d,\n    Point2dTypeConverter\n  );\n\n  TypeConverterManager.registerConverter(\n    StandardTypeNames.Point3d,\n    Point3dTypeConverter\n  );\n}\n"]}

package/lib/components-react/converters/valuetypes/ConvertedTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConvertedTypes.d.ts","sourceRoot":"","sources":["../../../../src/components-react/converters/valuetypes/ConvertedTypes.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD;;GAEG;AACH,yBAAiB,mBAAmB,CAAC;IACnC;;OAEG;IACH,UAAiB,OAAO;QACtB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX;IAED;;OAEG;IACH,UAAiB,OAAQ,SAAQ,OAAO;QACtC,CAAC,EAAE,MAAM,CAAC;KACX;IAED;;OAEG;IACH,KAAY,KAAK,GAAG,OAAO,GAAG,OAAO,CAAC;IAEtC;;OAEG;IACH,KAAY,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC;CAC3E"}

package/lib/components-react/converters/valuetypes/ConvertedTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConvertedTypes.js","sourceRoot":"","sources":["../../../../src/components-react/converters/valuetypes/ConvertedTypes.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module TypeConverters\n */\n\nimport type { Id64String } from \"@itwin/core-bentley\";\n\n/** Converted Primitives namespace\n * @public\n */\nexport namespace ConvertedPrimitives {\n  /** Interface for 2d Point\n   * @public\n   */\n  export interface Point2d {\n    x: number;\n    y: number;\n  }\n\n  /** Interface for 3d Point\n   * @public\n   */\n  export interface Point3d extends Point2d {\n    z: number;\n  }\n\n  /** Type definition for 2d or 3d Point\n   * @public\n   */\n  export type Point = Point2d | Point3d;\n\n  /** Type definition for Value\n   * @public\n   */\n  export type Value = boolean | number | string | Date | Point | Id64String;\n}\n"]}

package/lib/components-react/datepicker/DateField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAIrD;;GAEG;AAEH,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,mDAAmD;IACnD,WAAW,EAAE,IAAI,CAAC;IAClB,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC;kHAC8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qEAAqE;IACrE,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,2JAA2J;IAC3J,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,IAAI,EACf,WAAW,CAAC,EAAE,WAAW,EACzB,eAAe,CAAC,EAAE,aAAa,EAC/B,mBAAmB,CAAC,EAAE,oBAAoB,GACzC,MAAM,GAAG,SAAS,CAkEpB;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,aAAa,EACb,WAAW,EACX,KAAK,EACL,SAAS,GACV,EAAE,cAAc,qBA2FhB"}

package/lib/components-react/datepicker/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Date\n */\n\nimport \"./DateField.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport type { DateFormatter } from \"@itwin/appui-abstract\";\nimport { AlternateDateFormats, TimeDisplay } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { Logger } from \"@itwin/core-bentley\";\n\n/** Props for [[DateField]] Component.\n * @internal\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface DateFieldProps extends CommonProps {\n  /** Defines initial date and time for component. */\n  initialDate: Date;\n  /** Function to call when the date or time is changed. */\n  onDateChange?: (day: Date) => void;\n  /** Optional value to define if edit field allows editing. If a DateFormatter is provided\n   * it must provide a parseData function or the field will be read only no matter the setting of this value. */\n  readOnly?: boolean;\n  /** Optional date formatter that produces an explicit date display */\n  dateFormatter?: DateFormatter;\n  /** This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. */\n  timeDisplay?: TimeDisplay;\n}\n\n/** Function to format a Date object that is used in control, type editor, and type converter\n * to produce a consistent formatted Date string.\n * @internal\n */\nexport function formatInputDate(\n  inputDate: Date,\n  timeDisplay?: TimeDisplay,\n  customFormatter?: DateFormatter,\n  alternateDateFormat?: AlternateDateFormats\n): string | undefined {\n  if (customFormatter) {\n    return customFormatter.formateDate(inputDate);\n  }\n\n  if (alternateDateFormat) {\n    switch (alternateDateFormat) {\n      case AlternateDateFormats.IsoDateTime:\n        return inputDate.toISOString();\n      case AlternateDateFormats.IsoShort:\n        return inputDate.toISOString().slice(0, 10);\n      case AlternateDateFormats.UtcDateTime:\n        return inputDate.toUTCString().slice(5);\n      case AlternateDateFormats.UtcShort:\n        return inputDate.toUTCString().slice(5, 16);\n      case AlternateDateFormats.UtcDateTimeWithDay:\n        return inputDate.toUTCString();\n      case AlternateDateFormats.UtcShortWithDay:\n        return inputDate.toUTCString().slice(0, 16);\n    }\n  } else {\n    const dateString = inputDate.toLocaleDateString(undefined, {\n      day: \"2-digit\",\n      month: \"2-digit\",\n      year: \"numeric\",\n    });\n    let timeString: string = \"\";\n\n    if (timeDisplay) {\n      switch (timeDisplay) {\n        case TimeDisplay.H12MC:\n          timeString = inputDate.toLocaleTimeString(undefined, {\n            hour12: true,\n            hour: \"2-digit\",\n            minute: \"2-digit\",\n          });\n          break;\n        case TimeDisplay.H12MSC:\n          timeString = inputDate.toLocaleTimeString(undefined, {\n            hour12: true,\n            hour: \"2-digit\",\n            minute: \"2-digit\",\n            second: \"2-digit\",\n          });\n          break;\n        case TimeDisplay.H24M:\n          timeString = inputDate.toLocaleTimeString(undefined, {\n            hour12: false,\n            hour: \"2-digit\",\n            minute: \"2-digit\",\n          });\n          if (timeString === \"24:00\") timeString = \"00:00\";\n          break;\n        case TimeDisplay.H24MS:\n          timeString = inputDate.toLocaleTimeString(undefined, {\n            hour12: false,\n            hour: \"2-digit\",\n            minute: \"2-digit\",\n            second: \"2-digit\",\n          });\n          if (timeString === \"24:00:00\") timeString = \"00:00:00\";\n          break;\n      }\n    }\n    return timeString.length ? `${dateString}, ${timeString}` : dateString;\n  }\n}\n\n/** Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\n * @internal\n */\nexport function DateField({\n  initialDate,\n  onDateChange,\n  readOnly,\n  dateFormatter,\n  timeDisplay,\n  style,\n  className,\n}: DateFieldProps) {\n  const initialDateRef = React.useRef(initialDate);\n  const [hasBadInput, setHasBadInput] = React.useState(false);\n  const [inputValue, setInputValue] = React.useState(\n    formatInputDate(initialDate, timeDisplay, dateFormatter)\n  );\n\n  // See if new initialDate props have changed since component mounted\n  React.useEffect(() => {\n    if (initialDate.getTime() !== initialDateRef.current.getTime()) {\n      initialDateRef.current = initialDate;\n    }\n    setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\n  }, [initialDate, dateFormatter, timeDisplay]);\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setInputValue(event.currentTarget.value);\n    },\n    []\n  );\n\n  const parseDate = React.useCallback(\n    (dateString: string) => {\n      try {\n        if (dateFormatter && dateFormatter.parseDate)\n          return dateFormatter.parseDate(dateString);\n\n        const newDateValue = Date.parse(dateString);\n        if (newDateValue) return new Date(newDateValue);\n      } catch (_error) {\n        Logger.logInfo(\n          \"DateField\",\n          `Encountered error parsing input value '${dateString}' as a date.`\n        );\n        return undefined;\n      }\n      return undefined;\n    },\n    [dateFormatter]\n  );\n\n  const updateInputDate = React.useCallback(\n    (dateString: string) => {\n      try {\n        const newDateValue = parseDate(dateString);\n        if (newDateValue) {\n          const newDate = new Date(newDateValue);\n          onDateChange && onDateChange(newDate);\n          setHasBadInput(false);\n        } else {\n          setHasBadInput(true);\n        }\n      } catch (_error) {\n        setHasBadInput(true);\n      }\n    },\n    [onDateChange, parseDate]\n  );\n\n  const handleOnBlur = React.useCallback(\n    (event: React.FocusEvent<HTMLInputElement>) => {\n      updateInputDate(event.target.value);\n    },\n    [updateInputDate]\n  );\n\n  function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n    if (event.key === \"Enter\") {\n      updateInputDate(event.currentTarget.value);\n      event.preventDefault();\n    }\n  }\n  const classNames = classnames(\n    className,\n    \"components-date-input\",\n    hasBadInput && \"components-date-has-error\"\n  );\n  return (\n    <Input\n      data-testid=\"components-date-input\"\n      style={style}\n      className={classNames}\n      onKeyDown={onInputKeyDown}\n      onBlur={handleOnBlur}\n      onChange={handleInputChange}\n      value={inputValue}\n      disabled={readOnly || (dateFormatter && !dateFormatter.parseDate)}\n      size=\"small\"\n    />\n  );\n}\n"]}

package/lib/components-react/datepicker/DateField.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/inputs/variables" as *;
+
+.components-date-input {
+  width: auto;
+  padding: $uicore-iui-input-padding;
+
+  &.components-date-has-error {
+    color: var(--iui-color-text-negative);
+  }
+
+  &[disabled] {
+    color: var(--iui-color-text);
+    opacity: 0.65;
+  }
+}

package/lib/components-react/datepicker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,mBAAmB,CAAC;AAa3B;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,QAAQ,EAAE,IAAI,CAAC;IACf,qDAAqD;IACrD,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED;;;GAGG;AAEH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAmQhD"}

package/lib/components-react/datepicker/DatePicker.js

@@ -0,0 +1,188 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+import * as React from "react";
+import classnames from "classnames";
+import { Key } from "ts-key-enum";
+import { Icon } from "@itwin/core-react";
+import { SvgChevronLeft, SvgChevronRight } from "@itwin/itwinui-icons-react";
+import "./DatePicker.scss";
+import { useTranslation } from "../l10n/useTranslation.js";
+function isSameDay(a, b) {
+    return (a &&
+        b &&
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.
+ */
+// eslint-disable-next-line deprecation/deprecation
+export function DatePicker(props) {
+    const { translate } = useTranslation();
+    const previousMonthLabel = translate("datepicker.previousMonth");
+    const nextMonthLabel = translate("datepicker.nextMonth");
+    const monthsLong = [
+        translate("month.long.january"),
+        translate("month.long.february"),
+        translate("month.long.march"),
+        translate("month.long.april"),
+        translate("month.long.may"),
+        translate("month.long.june"),
+        translate("month.long.july"),
+        translate("month.long.august"),
+        translate("month.long.september"),
+        translate("month.long.october"),
+        translate("month.long.november"),
+        translate("month.long.december"),
+    ];
+    const daysLong = [
+        translate("days.long.sunday"),
+        translate("days.long.monday"),
+        translate("days.long.tuesday"),
+        translate("days.long.wednesday"),
+        translate("days.long.thursday"),
+        translate("days.long.friday"),
+        translate("days.long.saturday"),
+    ];
+    const daysShort = [
+        translate("days.short.sunday"),
+        translate("days.short.monday"),
+        translate("days.short.tuesday"),
+        translate("days.short.wednesday"),
+        translate("days.short.thursday"),
+        translate("days.short.friday"),
+        translate("days.short.saturday"),
+    ];
+    const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));
+    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());
+    const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());
+    const [focusedDay, setFocusedDay] = React.useState(selectedDay);
+    React.useEffect(() => {
+        const newSelectedDay = new Date(props.selected);
+        setSelectedDay(new Date(props.selected));
+        setDisplayedMonthIndex(newSelectedDay.getMonth());
+        setDisplayedYear(newSelectedDay.getFullYear());
+        setFocusedDay(newSelectedDay);
+    }, [props.selected]);
+    const days = React.useMemo(() => {
+        const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();
+        let offsetToFirst = new Date(msFirstDayOfMonth).getDay();
+        if (0 === offsetToFirst)
+            offsetToFirst = 7;
+        const daysInMonth = [];
+        // generate 6 weeks of dates
+        for (let i = 0; i < 42; i++) {
+            const adjustedDay = 1 + i - offsetToFirst;
+            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
+        }
+        return daysInMonth;
+    }, [displayedMonthIndex, displayedYear]);
+    const weeks = React.useMemo(() => {
+        const weeksInMonth = [];
+        const weekCount = Math.ceil(days.length / 7);
+        for (let i = 0; i < weekCount; i++) {
+            weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
+        }
+        return weeksInMonth;
+    }, [days]);
+    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
+        setDisplayedMonthIndex(newMonth);
+        setDisplayedYear(newYear);
+        if (selectedDay.getFullYear() === newYear &&
+            selectedDay.getMonth() === newMonth) {
+            setFocusedDay(new Date(selectedDay.getTime()));
+        }
+        else {
+            const newFocusDay = new Date(focusedDay.getTime());
+            newFocusDay.setFullYear(newYear, newMonth, 1);
+            setFocusedDay(newFocusDay);
+        }
+    }, [focusedDay, selectedDay]);
+    const handleMoveToPreviousMonth = React.useCallback(() => {
+        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
+        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
+        setMonthAndYear(newMonth, newYear);
+    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
+    const handleMoveToNextMonth = React.useCallback(() => {
+        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
+        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
+        setMonthAndYear(newMonth, newYear);
+    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
+    // when invoked, it will return another function which can be used for the onClick React listener.
+    const handleOnDayChange = React.useCallback((day) => () => {
+        setSelectedDay(day);
+        setFocusedDay(day);
+        props.onDateChange && props.onDateChange(day);
+    }, [props]);
+    const handleCalendarKeyDown = React.useCallback((event) => {
+        if (event.key === Key.ArrowDown.valueOf()) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if (focusedDayIndex + 7 > 41)
+                setFocusedDay(days[focusedDayIndex % 7]);
+            else
+                setFocusedDay(days[focusedDayIndex + 7]);
+            event.preventDefault();
+        }
+        if (event.key === Key.ArrowUp.valueOf()) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if (focusedDayIndex - 7 < 0)
+                setFocusedDay(days[(focusedDayIndex % 7) + 35]);
+            else
+                setFocusedDay(days[focusedDayIndex - 7]);
+            event.preventDefault();
+        }
+        if (event.key === Key.ArrowLeft.valueOf()) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if (focusedDayIndex - 1 >= 0)
+                setFocusedDay(days[focusedDayIndex - 1]);
+            event.preventDefault();
+        }
+        if (event.key === Key.ArrowRight.valueOf()) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if (focusedDayIndex + 1 <= 41)
+                setFocusedDay(days[focusedDayIndex + 1]);
+            event.preventDefault();
+        }
+        if (event.key === Key.Enter.valueOf() || event.key === " ") {
+            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
+            event.preventDefault();
+        }
+    }, [days, focusedDay, handleOnDayChange]);
+    const previousButtonClass = classnames("components-previous-month", props.showFocusOutline && "showFocusOutline");
+    const nextButtonClass = classnames("components-next-month", props.showFocusOutline && "showFocusOutline");
+    const calendarClass = classnames("components-date-picker-calendar-month", props.showFocusOutline && "showFocusOutline");
+    return (React.createElement("div", { className: "components-date-picker-calendar" },
+        React.createElement("div", { className: "components-date-picker-calendar-header-months" },
+            React.createElement("button", { className: previousButtonClass, title: previousMonthLabel, onClick: handleMoveToPreviousMonth },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronLeft, null) })),
+            React.createElement("span", { className: "components-month-year" },
+                monthsLong[displayedMonthIndex],
+                " ",
+                displayedYear),
+            React.createElement("button", { className: nextButtonClass, title: nextMonthLabel, onClick: handleMoveToNextMonth },
+                React.createElement(Icon, { iconSpec: React.createElement(SvgChevronRight, null) }))),
+        React.createElement("div", { className: "components-date-picker-calendar-header-weekdays" }, [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => (React.createElement("div", { key: `day-${dayOfWeek}`, className: "components-date-picker-calendar-header-day-short", title: daysLong[dayOfWeek] },
+            React.createElement("span", null, daysShort[dayOfWeek]))))),
+        React.createElement("ul", { tabIndex: 0, onKeyDown: handleCalendarKeyDown, "data-testid": "components-date-picker-calendar-list", className: calendarClass, role: "listbox" }, weeks.map((weekdays, weekIndex) => (React.createElement(React.Fragment, { key: `week-${weekIndex}` }, weekdays.map((day, dayIndex) => {
+            const isActive = selectedDay && day && isSameDay(selectedDay, day);
+            const isFocused = focusedDay &&
+                day &&
+                isSameDay(focusedDay, day) &&
+                props.showFocusOutline;
+            const isCurrentMonth = day.getMonth() === displayedMonthIndex;
+            const classNames = classnames("components-date-picker-calendar-day", isActive && "selected", !isCurrentMonth && "notCurrentMonth", isFocused && "focused");
+            const dateValue = day.getDate();
+            return (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React.createElement("li", { className: classNames, key: `${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`, onClick: handleOnDayChange(day), role: "option", "aria-selected": isActive, "data-value": day.getTime() },
+                React.createElement("span", null, dateValue)));
+        })))))));
+}
+//# sourceMappingURL=DatePicker.js.map

package/lib/components-react/datepicker/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Date\n */\n\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport { Key } from \"ts-key-enum\";\nimport { Icon } from \"@itwin/core-react\";\nimport { SvgChevronLeft, SvgChevronRight } from \"@itwin/itwinui-icons-react\";\nimport \"./DatePicker.scss\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\n\nfunction isSameDay(a: Date, b: Date) {\n  return (\n    a &&\n    b &&\n    a.getFullYear() === b.getFullYear() &&\n    a.getMonth() === b.getMonth() &&\n    a.getDate() === b.getDate()\n  );\n}\n\n/**\n * Props for [[DatePicker]] component.\n * @alpha\n * @deprecated in 4.11.0. Props of deprecated component {@link DatePicker}.\n */\nexport interface DatePickerProps {\n  /** defines both date and time */\n  selected: Date;\n  /** function to call when date or time has changed */\n  onDateChange?: (day: Date) => void;\n  /** show focus outlines, useful for keyboard navigation */\n  showFocusOutline?: boolean;\n}\n\n/** DatePicker component. Show a month selector and a day calendar to select a specific date.\n * @alpha\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport function DatePicker(props: DatePickerProps) {\n  const { translate } = useTranslation();\n  const previousMonthLabel = translate(\"datepicker.previousMonth\");\n  const nextMonthLabel = translate(\"datepicker.nextMonth\");\n  const monthsLong = [\n    translate(\"month.long.january\"),\n    translate(\"month.long.february\"),\n    translate(\"month.long.march\"),\n    translate(\"month.long.april\"),\n    translate(\"month.long.may\"),\n    translate(\"month.long.june\"),\n    translate(\"month.long.july\"),\n    translate(\"month.long.august\"),\n    translate(\"month.long.september\"),\n    translate(\"month.long.october\"),\n    translate(\"month.long.november\"),\n    translate(\"month.long.december\"),\n  ];\n\n  const daysLong = [\n    translate(\"days.long.sunday\"),\n    translate(\"days.long.monday\"),\n    translate(\"days.long.tuesday\"),\n    translate(\"days.long.wednesday\"),\n    translate(\"days.long.thursday\"),\n    translate(\"days.long.friday\"),\n    translate(\"days.long.saturday\"),\n  ];\n\n  const daysShort = [\n    translate(\"days.short.sunday\"),\n    translate(\"days.short.monday\"),\n    translate(\"days.short.tuesday\"),\n    translate(\"days.short.wednesday\"),\n    translate(\"days.short.thursday\"),\n    translate(\"days.short.friday\"),\n    translate(\"days.short.saturday\"),\n  ];\n\n  const [selectedDay, setSelectedDay] = React.useState(\n    new Date(props.selected.getTime())\n  );\n  const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(\n    selectedDay.getMonth()\n  );\n  const [displayedYear, setDisplayedYear] = React.useState(\n    selectedDay.getFullYear()\n  );\n  const [focusedDay, setFocusedDay] = React.useState(selectedDay);\n  React.useEffect(() => {\n    const newSelectedDay = new Date(props.selected);\n    setSelectedDay(new Date(props.selected));\n    setDisplayedMonthIndex(newSelectedDay.getMonth());\n    setDisplayedYear(newSelectedDay.getFullYear());\n    setFocusedDay(newSelectedDay);\n  }, [props.selected]);\n  const days = React.useMemo(() => {\n    const msFirstDayOfMonth = new Date(\n      displayedYear,\n      displayedMonthIndex,\n      1\n    ).getTime();\n    let offsetToFirst = new Date(msFirstDayOfMonth).getDay();\n    if (0 === offsetToFirst) offsetToFirst = 7;\n\n    const daysInMonth: Date[] = [];\n    // generate 6 weeks of dates\n    for (let i = 0; i < 42; i++) {\n      const adjustedDay = 1 + i - offsetToFirst;\n      daysInMonth.push(\n        new Date(displayedYear, displayedMonthIndex, adjustedDay)\n      );\n    }\n    return daysInMonth;\n  }, [displayedMonthIndex, displayedYear]);\n\n  const weeks = React.useMemo(() => {\n    const weeksInMonth = [];\n    const weekCount = Math.ceil(days.length / 7);\n    for (let i = 0; i < weekCount; i++) {\n      weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));\n    }\n    return weeksInMonth;\n  }, [days]);\n\n  const setMonthAndYear = React.useCallback(\n    (newMonth: number, newYear: number) => {\n      setDisplayedMonthIndex(newMonth);\n      setDisplayedYear(newYear);\n      if (\n        selectedDay.getFullYear() === newYear &&\n        selectedDay.getMonth() === newMonth\n      ) {\n        setFocusedDay(new Date(selectedDay.getTime()));\n      } else {\n        const newFocusDay = new Date(focusedDay.getTime());\n        newFocusDay.setFullYear(newYear, newMonth, 1);\n        setFocusedDay(newFocusDay);\n      }\n    },\n    [focusedDay, selectedDay]\n  );\n\n  const handleMoveToPreviousMonth = React.useCallback(() => {\n    const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;\n    const newYear =\n      displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;\n    setMonthAndYear(newMonth, newYear);\n  }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\n\n  const handleMoveToNextMonth = React.useCallback(() => {\n    const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;\n    const newYear =\n      displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;\n    setMonthAndYear(newMonth, newYear);\n  }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\n\n  // when invoked, it will return another function which can be used for the onClick React listener.\n  const handleOnDayChange = React.useCallback(\n    (day: Date) => () => {\n      setSelectedDay(day);\n      setFocusedDay(day);\n      props.onDateChange && props.onDateChange(day);\n    },\n    [props]\n  );\n\n  const handleCalendarKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLUListElement>) => {\n      if (event.key === Key.ArrowDown.valueOf()) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        if (focusedDayIndex + 7 > 41) setFocusedDay(days[focusedDayIndex % 7]);\n        else setFocusedDay(days[focusedDayIndex + 7]);\n        event.preventDefault();\n      }\n      if (event.key === Key.ArrowUp.valueOf()) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        if (focusedDayIndex - 7 < 0)\n          setFocusedDay(days[(focusedDayIndex % 7) + 35]);\n        else setFocusedDay(days[focusedDayIndex - 7]);\n        event.preventDefault();\n      }\n      if (event.key === Key.ArrowLeft.valueOf()) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        if (focusedDayIndex - 1 >= 0) setFocusedDay(days[focusedDayIndex - 1]);\n        event.preventDefault();\n      }\n      if (event.key === Key.ArrowRight.valueOf()) {\n        const focusedDayIndex = days.findIndex((day) =>\n          isSameDay(day, focusedDay)\n        );\n        if (focusedDayIndex + 1 <= 41) setFocusedDay(days[focusedDayIndex + 1]);\n        event.preventDefault();\n      }\n      if (event.key === Key.Enter.valueOf() || event.key === \" \") {\n        handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function\n        event.preventDefault();\n      }\n    },\n    [days, focusedDay, handleOnDayChange]\n  );\n\n  const previousButtonClass = classnames(\n    \"components-previous-month\",\n    props.showFocusOutline && \"showFocusOutline\"\n  );\n  const nextButtonClass = classnames(\n    \"components-next-month\",\n    props.showFocusOutline && \"showFocusOutline\"\n  );\n  const calendarClass = classnames(\n    \"components-date-picker-calendar-month\",\n    props.showFocusOutline && \"showFocusOutline\"\n  );\n\n  return (\n    <div className=\"components-date-picker-calendar\">\n      <div className=\"components-date-picker-calendar-header-months\">\n        <button\n          className={previousButtonClass}\n          title={previousMonthLabel}\n          onClick={handleMoveToPreviousMonth}\n        >\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <Icon iconSpec={<SvgChevronLeft />} />\n        </button>\n        <span className=\"components-month-year\">\n          {monthsLong[displayedMonthIndex]} {displayedYear}\n        </span>\n        <button\n          className={nextButtonClass}\n          title={nextMonthLabel}\n          onClick={handleMoveToNextMonth}\n        >\n          {/* eslint-disable-next-line deprecation/deprecation */}\n          <Icon iconSpec={<SvgChevronRight />} />\n        </button>\n      </div>\n      <div className=\"components-date-picker-calendar-header-weekdays\">\n        {[0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => (\n          <div\n            key={`day-${dayOfWeek}`}\n            className=\"components-date-picker-calendar-header-day-short\"\n            title={daysLong[dayOfWeek]}\n          >\n            <span>{daysShort[dayOfWeek]}</span>\n          </div>\n        ))}\n      </div>\n      <ul\n        tabIndex={0}\n        onKeyDown={handleCalendarKeyDown}\n        data-testid=\"components-date-picker-calendar-list\"\n        className={calendarClass}\n        role=\"listbox\"\n      >\n        {weeks.map((weekdays, weekIndex) => (\n          <React.Fragment key={`week-${weekIndex}`}>\n            {weekdays.map((day: Date, dayIndex: number) => {\n              const isActive =\n                selectedDay && day && isSameDay(selectedDay, day);\n              const isFocused =\n                focusedDay &&\n                day &&\n                isSameDay(focusedDay, day) &&\n                props.showFocusOutline;\n              const isCurrentMonth = day.getMonth() === displayedMonthIndex;\n              const classNames = classnames(\n                \"components-date-picker-calendar-day\",\n                isActive && \"selected\",\n                !isCurrentMonth && \"notCurrentMonth\",\n                isFocused && \"focused\"\n              );\n              const dateValue = day.getDate();\n              return (\n                /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\n                <li\n                  className={classNames}\n                  key={`${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`}\n                  onClick={handleOnDayChange(day)}\n                  role=\"option\"\n                  aria-selected={isActive}\n                  data-value={day.getTime()}\n                >\n                  <span>{dateValue}</span>\n                </li>\n              );\n            })}\n          </React.Fragment>\n        ))}\n      </ul>\n    </div>\n  );\n}\n"]}

package/lib/components-react/datepicker/DatePicker.scss

@@ -0,0 +1,179 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$date-picker-m: 16px;
+$date-picker-icons-color-actionable: rgba(
+  var(--iui-color-text),
+  var(--iui-opacity-2)
+);
+$date-picker-icons-color-actionable-hover: rgba(
+  var(--iui-color-text),
+  var(--iui-opacity-1)
+);
+$date-picker-outside-month-color: var(--iui-color-text-disabled);
+$outline-size: 2px;
+
+.components-date-picker-calendar {
+  border-radius: var(--iui-border-radius-1) var(--iui-border-radius-1) 0 0;
+  background-color: var(--iui-color-background);
+  color: var(--iui-color-text);
+  font-size: 14px;
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .components-date-picker-calendar-header-months {
+    display: inline-flex;
+    width: calc(100% - 12px);
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px;
+
+    button.components-previous-month,
+    button.components-next-month {
+      background-color: var(--iui-color-background);
+      border: none;
+      cursor: pointer;
+      padding: 5px;
+      font-size: var(--iui-font-size-2);
+      user-select: none;
+      -webkit-user-select: none;
+      color: $date-picker-icons-color-actionable;
+
+      &:focus {
+        outline: 0px;
+
+        &.showFocusOutline {
+          outline: 0px;
+          border: 0px solid var(--iui-color-border-foreground);
+          border-radius: var(--iui-border-radius-1);
+          border-color: hsl(
+            var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+          );
+          box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+            hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
+        }
+      }
+
+      &:hover {
+        color: var(--iui-color-text-accent);
+      }
+    }
+
+    .components-next-month {
+      text-align: right;
+    }
+
+    .components-month-year {
+      flex: 2;
+      font-weight: var(--iui-font-weight-bold);
+      text-align: center;
+    }
+  }
+
+  .components-date-picker-calendar-header-weekdays {
+    display: grid;
+    background-color: var(--iui-color-background-hover);
+    padding-inline-start: 8px;
+    padding-inline-end: 8px;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    align-items: center;
+
+    .components-date-picker-calendar-header-day-short {
+      text-align: center;
+      text-decoration: none;
+      font-weight: var(--iui-font-weight-bold);
+      height: 32px;
+      width: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  ul.components-date-picker-calendar-month {
+    margin: 1px;
+    padding: 4px 5px;
+    list-style: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    text-align: center;
+    align-items: center;
+    align-self: center;
+
+    &:focus {
+      outline: 0px;
+
+      &.showFocusOutline {
+        border: 0px solid var(--iui-color-border-foreground);
+        border-radius: var(--iui-border-radius-1);
+        border-color: hsl(
+          var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+        );
+        box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+          hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
+
+        .components-date-picker-calendar-day.focused {
+          outline: 0px;
+          border: 1px solid var(--iui-color-border-foreground);
+          border-radius: var(--iui-border-radius-1);
+          border-color: hsl(
+            var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+          );
+          box-shadow: hsl(var(--iui-color-accent-hsl) / 0) 0px 1px 1px,
+            hsl(var(--iui-color-accent-hsl) / 0.65) 0px 0px 0px 2px;
+          z-index: 1;
+        }
+      }
+    }
+
+    .components-date-picker-calendar-day {
+      box-sizing: border-box;
+      text-align: center;
+      white-space: nowrap;
+      cursor: pointer;
+      height: 32px;
+      width: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      &:focus {
+        outline: 0px;
+      }
+
+      &:hover:not(.selected) {
+        background-color: var(--iui-color-background-hover);
+        border-radius: var(--iui-border-radius-1);
+        font-weight: var(--iui-font-weight-semibold);
+      }
+
+      &.selected {
+        background-color: var(--iui-color-background-accent);
+        color: var(--iui-color-white);
+        font-weight: var(--iui-font-weight-semibold);
+        border-radius: var(--iui-border-radius-1);
+
+        &:hover {
+          background-color: var(--iui-color-background-hover);
+          color: var(--iui-color-text);
+        }
+      }
+
+      &.today {
+        background-color: rgba(var(--iui-color-text), var(--iui-opacity-6));
+        font-weight: var(--iui-font-weight-semibold);
+        border-radius: 50%;
+      }
+
+      &.notCurrentMonth {
+        &:not(.selected) {
+          color: $date-picker-outside-month-color;
+          font-weight: var(--iui-font-weight-light);
+        }
+      }
+    }
+  }
+}

package/lib/components-react/datepicker/DatePickerPopupButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPopupButton.d.ts","sourceRoot":"","sources":["../../../src/components-react/datepicker/DatePickerPopupButton.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAOrD,OAAO,8BAA8B,CAAC;AAGtC;;;GAGG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,6CAA6C;IAC7C,QAAQ,EAAE,IAAI,CAAC;IACf,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAC;IACnC,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAClC;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,aAAa,EACb,UAAU,EACV,cAAc,EACd,KAAK,GACN,EACD,0BAA0B,qBA8HzB"}