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

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

@@ -1,177 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/style/opacity";
-@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
-
-$date-picker-m: 16px;
-$date-picker-icons-color-actionable: rgba(
-  $buic-foreground-body,
-  $uicore-opacity-2
-);
-$date-picker-icons-color-actionable-hover: rgba(
-  $buic-foreground-body,
-  $uicore-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: $buic-background-control;
-  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: $buic-background-control;
-      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: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-            var(--buic-focus-boxshadow-gradient2) 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: $buic-background-2;
-    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: var(--buic-foreground-focus-border);
-        box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-          var(--buic-focus-boxshadow-gradient2) 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: var(--buic-foreground-focus-border);
-          box-shadow: var(--buic-focus-boxshadow-gradient1) 0px 1px 1px,
-            var(--buic-focus-boxshadow-gradient2) 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: $buic-row-hover;
-        border-radius: var(--iui-border-radius-1);
-        font-weight: var(--iui-font-weight-semibold);
-      }
-
-      &.selected {
-        background-color: $buic-background-primary;
-        color: var(--iui-color-white);
-        font-weight: var(--iui-font-weight-semibold);
-        border-radius: var(--iui-border-radius-1);
-
-        &:hover {
-          background-color: $buic-row-hover;
-          color: var(--iui-color-text);
-        }
-      }
-
-      &.today {
-        background-color: rgba($buic-foreground-body, $uicore-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/cjs/components-react/datepicker/DatePickerPopupButton.d.ts.map

@@ -1 +0,0 @@
-{"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"}

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.js

@@ -1,107 +0,0 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DatePickerPopupButton = void 0;
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-const DatePicker_1 = require("./DatePicker");
-const DateField_1 = require("./DateField");
-const TimeField_1 = require("./TimeField");
-require("./DatePickerPopupButton.scss");
-const useTranslation_1 = require("../l10n/useTranslation");
-/** Component that displays a button used to pick a date and optionally a time.
- * @alpha
- * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.
- */
-function DatePickerPopupButton({ displayEditField, timeDisplay, selected, onDateChange, dateFormatter, buttonToolTip, fieldStyle, fieldClassName, style, }) {
-    const { translate } = (0, useTranslation_1.useTranslation)();
-    const [workingDate, setWorkingDate] = React.useState(new Date(selected.getTime()));
-    const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
-    const toolTipLabel = buttonToolTip ?? translate("datepicker.selectDate");
-    // See if props have changed since component mounted
-    React.useEffect(() => {
-        const newWorkingDate = new Date(selected.getTime());
-        setWorkingDate(newWorkingDate);
-    }, [selected]);
-    const buttonRef = React.useRef(null);
-    const togglePopupDisplay = React.useCallback((event) => {
-        event.preventDefault();
-        setShowFocusOutline(false);
-        setIsSettingsOpen((prev) => !prev);
-    }, [setIsSettingsOpen]);
-    const handleCloseSetting = React.useCallback(() => {
-        setIsSettingsOpen(false);
-    }, [setIsSettingsOpen]);
-    const handleOnDateChanged = (day) => {
-        // combine current time into selected Date
-        const newWorkingDate = new Date(day.getTime());
-        newWorkingDate.setHours(workingDate.getHours(), workingDate.getMinutes(), workingDate.getSeconds());
-        onDateChange && onDateChange(newWorkingDate);
-        !timeDisplay && setIsSettingsOpen(false);
-    };
-    const handleOnTimeChanged = (time) => {
-        // Combine new time into selected Date
-        const newWorkingDate = new Date(workingDate.getTime());
-        newWorkingDate.setHours(time.hours, time.minutes, time.seconds);
-        setWorkingDate(newWorkingDate);
-        onDateChange && onDateChange(newWorkingDate);
-    };
-    const [showFocusOutline, setShowFocusOutline] = React.useState(false);
-    const handlePopupKeyDown = React.useCallback((event) => {
-        if (event.key === " ") {
-            setShowFocusOutline(true);
-            setIsSettingsOpen(true);
-        }
-    }, []);
-    const timeSpec = {
-        hours: workingDate.getHours(),
-        minutes: workingDate.getMinutes(),
-        seconds: workingDate.getSeconds(),
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("button", { title: toolTipLabel, style: style, className: "components-date-picker-calendar-popup-button", onKeyDown: handlePopupKeyDown, "data-testid": "components-date-picker-calendar-popup-button", onPointerDown: togglePopupDisplay, ref: buttonRef },
-            React.createElement("div", { className: "datepicker-button" },
-                React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16" },
-                    React.createElement("path", { d: "M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z" })))),
-        React.createElement(core_react_1.Popup, { isOpen: isSettingsOpen, position: appui_abstract_1.RelativePosition.BottomLeft, onClose: handleCloseSetting, target: buttonRef.current, closeOnEnter: false, moveFocus: showFocusOutline, closeOnNestedPopupOutsideClick: true },
-            React.createElement("div", { className: "components-date-picker-calendar-popup-panel", "data-testid": "components-date-picker-calendar-popup-panel" },
-                React.createElement(DatePicker_1.DatePicker // eslint-disable-line deprecation/deprecation
-                , { selected: workingDate, onDateChange: handleOnDateChanged, showFocusOutline: showFocusOutline }),
-                timeDisplay && (React.createElement("div", { className: "time-container" },
-                    React.createElement(itwinui_react_1.Text, { variant: "body", className: "time-label" }, translate("datepicker.time")),
-                    React.createElement(TimeField_1.TimeField, { time: timeSpec, timeDisplay: timeDisplay, onTimeChange: handleOnTimeChanged }))))),
-        !!displayEditField && (React.createElement(DateField_1.DateField, { style: fieldStyle, className: fieldClassName, initialDate: workingDate, timeDisplay: timeDisplay, dateFormatter: dateFormatter, onDateChange: handleOnDateChanged }))));
-}
-exports.DatePickerPopupButton = DatePickerPopupButton;
-//# sourceMappingURL=DatePickerPopupButton.js.map

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DatePickerPopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePickerPopupButton.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 type { DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { RelativePosition } from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Popup } from \"@itwin/core-react\";\nimport { Text } from \"@itwin/itwinui-react\";\nimport { DatePicker } from \"./DatePicker\";\nimport { DateField } from \"./DateField\";\nimport type { TimeSpec } from \"./TimeField\";\nimport { TimeField } from \"./TimeField\";\nimport \"./DatePickerPopupButton.scss\";\nimport { useTranslation } from \"../l10n/useTranslation\";\n\n/** Props used by [[DatePickerPopupButton]] component.\n * @alpha\n * @deprecated in 4.11.0. Props of deprecated component {@link DatePickerPopupButton}.\n */\n// eslint-disable-next-line deprecation/deprecation\nexport interface DatePickerPopupButtonProps extends CommonProps {\n  /** Date to be shown as the selected date. */\n  selected: Date;\n  /** If true show the date (and optionally time) edit field next to button */\n  displayEditField?: boolean;\n  // If defined show time in popup and also display time if input field is shown\n  timeDisplay?: TimeDisplay;\n  /** Function called when Date changes. */\n  onDateChange?: (day: Date) => void;\n  /** Optional tooltip */\n  buttonToolTip?: string;\n  /* Custom date formatter. WARNING: if used values will only be shown in specified format and will not be based on locale.\n   * If used the existence of a parseDate function will determine if the edit field allows editing. */\n  dateFormatter?: DateFormatter;\n  /** User defined class name for edit field. */\n  fieldClassName?: string;\n  /** User defined style for edit field. */\n  fieldStyle?: React.CSSProperties;\n}\n\n/** Component that displays a button used to pick a date and optionally a time.\n * @alpha\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.\n */\nexport function DatePickerPopupButton({\n  displayEditField,\n  timeDisplay,\n  selected,\n  onDateChange,\n  dateFormatter,\n  buttonToolTip,\n  fieldStyle,\n  fieldClassName,\n  style,\n}: // eslint-disable-next-line deprecation/deprecation\nDatePickerPopupButtonProps) {\n  const { translate } = useTranslation();\n  const [workingDate, setWorkingDate] = React.useState(\n    new Date(selected.getTime())\n  );\n  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);\n  const toolTipLabel = buttonToolTip ?? translate(\"datepicker.selectDate\");\n\n  // See if props have changed since component mounted\n  React.useEffect(() => {\n    const newWorkingDate = new Date(selected.getTime());\n    setWorkingDate(newWorkingDate);\n  }, [selected]);\n\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const togglePopupDisplay = React.useCallback(\n    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n      event.preventDefault();\n      setShowFocusOutline(false);\n      setIsSettingsOpen((prev) => !prev);\n    },\n    [setIsSettingsOpen]\n  );\n\n  const handleCloseSetting = React.useCallback(() => {\n    setIsSettingsOpen(false);\n  }, [setIsSettingsOpen]);\n\n  const handleOnDateChanged = (day: Date) => {\n    // combine current time into selected Date\n    const newWorkingDate = new Date(day.getTime());\n    newWorkingDate.setHours(\n      workingDate.getHours(),\n      workingDate.getMinutes(),\n      workingDate.getSeconds()\n    );\n    onDateChange && onDateChange(newWorkingDate);\n    !timeDisplay && setIsSettingsOpen(false);\n  };\n\n  const handleOnTimeChanged = (time: TimeSpec) => {\n    // Combine new time into selected Date\n    const newWorkingDate = new Date(workingDate.getTime());\n    newWorkingDate.setHours(time.hours, time.minutes, time.seconds);\n    setWorkingDate(newWorkingDate);\n    onDateChange && onDateChange(newWorkingDate);\n  };\n\n  const [showFocusOutline, setShowFocusOutline] = React.useState(false);\n  const handlePopupKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      if (event.key === \" \") {\n        setShowFocusOutline(true);\n        setIsSettingsOpen(true);\n      }\n    },\n    []\n  );\n\n  const timeSpec: TimeSpec = {\n    hours: workingDate.getHours(),\n    minutes: workingDate.getMinutes(),\n    seconds: workingDate.getSeconds(),\n  };\n  return (\n    <>\n      <button\n        title={toolTipLabel}\n        style={style}\n        className=\"components-date-picker-calendar-popup-button\"\n        onKeyDown={handlePopupKeyDown}\n        data-testid=\"components-date-picker-calendar-popup-button\"\n        onPointerDown={togglePopupDisplay}\n        ref={buttonRef}\n      >\n        <div className=\"datepicker-button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n            <path d=\"M13,13H9V10h4ZM16,3V15a1,1,0,0,1-1,1H1a1,1,0,0,1-1-1V3A1,1,0,0,1,1,2H3V0H4V2h8V0h1V2h2A1,1,0,0,1,16,3ZM15,6H1v9H15Z\" />\n          </svg>\n        </div>\n      </button>\n      {/* eslint-disable-next-line deprecation/deprecation */}\n      <Popup\n        isOpen={isSettingsOpen}\n        position={RelativePosition.BottomLeft}\n        onClose={handleCloseSetting}\n        target={buttonRef.current}\n        closeOnEnter={false}\n        moveFocus={showFocusOutline}\n        closeOnNestedPopupOutsideClick\n      >\n        <div\n          className=\"components-date-picker-calendar-popup-panel\"\n          data-testid=\"components-date-picker-calendar-popup-panel\"\n        >\n          <DatePicker // eslint-disable-line deprecation/deprecation\n            selected={workingDate}\n            onDateChange={handleOnDateChanged}\n            showFocusOutline={showFocusOutline}\n          />\n          {timeDisplay && (\n            <div className=\"time-container\">\n              <Text variant=\"body\" className=\"time-label\">\n                {translate(\"datepicker.time\")}\n              </Text>\n              <TimeField\n                time={timeSpec}\n                timeDisplay={timeDisplay}\n                onTimeChange={handleOnTimeChanged}\n              />\n            </div>\n          )}\n        </div>\n      </Popup>\n      {!!displayEditField && (\n        <DateField\n          style={fieldStyle}\n          className={fieldClassName}\n          initialDate={workingDate}\n          timeDisplay={timeDisplay}\n          dateFormatter={dateFormatter}\n          onDateChange={handleOnDateChanged}\n        />\n      )}\n    </>\n  );\n}\n"]}

package/lib/cjs/components-react/datepicker/DatePickerPopupButton.scss

@@ -1,57 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/index";
-
-.components-date-picker-calendar-popup-button {
-  color: var(--iui-color-text);
-  font-size: var(--iui-font-size-1);
-  background-color: transparent;
-  height: 2.2em;
-  border: none;
-  margin-right: 2px;
-
-  .datepicker-button {
-    width: 16px;
-    height: 16px;
-  }
-
-  svg {
-    fill: var(--iui-color-icon);
-  }
-
-  &:hover {
-    color: var(--iui-color-text-accent-hover);
-    cursor: auto;
-
-    svg {
-      fill: $buic-foreground-primary-tone;
-    }
-  }
-
-  &:focus {
-    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
-    outline: none;
-  }
-}
-
-.components-date-picker-calendar-popup-panel {
-  display: flex;
-  flex-direction: column;
-  background-color: $buic-background-control;
-
-  .time-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    border-top: 2px solid var(--iui-color-border-foreground);
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    .time-label {
-      margin-right: 4px;
-    }
-  }
-}

package/lib/cjs/components-react/datepicker/IntlFormatter.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntlFormatter.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/IntlFormatter.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;;;;;;;GAQG;AACH,qBAAa,aAAc,YAAW,aAAa;IACrC,OAAO,CAAC,cAAc,CAAC;gBAAf,cAAc,CAAC,iCAAqB;IAExD,IAAW,SAAS,IAAI,IAAI,CAAC,cAAc,CAgB1C;IAEM,WAAW,CAAC,GAAG,EAAE,IAAI;CAO7B"}

package/lib/cjs/components-react/datepicker/IntlFormatter.js

@@ -1,46 +0,0 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
- * 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
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IntlFormatter = void 0;
-/**
- * A basic class that allows user to provide an Intl.DateTimeFormat
- * that can be used to format the date and time display. If no format is
- * specified a default format will be used. This default implementation does not
- * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If
- * a parseData function is implemented then the edit field will be editable.
- * @alpha
- * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.
- */
-class IntlFormatter {
-    constructor(_intlFormatter) {
-        this._intlFormatter = _intlFormatter;
-    }
-    get formatter() {
-        if (!this._intlFormatter) {
-            // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor
-            this._intlFormatter = new Intl.DateTimeFormat(undefined, {
-                weekday: "short" /* "narrow", "short", "long" */,
-                year: "numeric" /* "2-digit", "numeric" */,
-                month: "2-digit" /* "2-digit", "numeric", "narrow", "short", "long" */,
-                day: "2-digit" /* "2-digit", "numeric" */,
-                hour: "numeric" /* "2-digit", "numeric" */,
-                hour12: true,
-                minute: "numeric" /* "2-digit", "numeric" */,
-                second: "numeric" /* "2-digit", "numeric" */ /* "short", "long" */,
-                /* timeZoneName:	"short", */
-            });
-        }
-        return this._intlFormatter;
-    }
-    formateDate(day) {
-        return this.formatter.format(day);
-    }
-}
-exports.IntlFormatter = IntlFormatter;
-//# sourceMappingURL=IntlFormatter.js.map

package/lib/cjs/components-react/datepicker/IntlFormatter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"IntlFormatter.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/IntlFormatter.ts"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAIH;;;;;;;;GAQG;AACH,MAAa,aAAa;IACxB,YAAoB,cAAoC;QAApC,mBAAc,GAAd,cAAc,CAAsB;IAAG,CAAC;IAE5D,IAAW,SAAS;QAClB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,+DAA+D;YAC/D,IAAI,CAAC,cAAc,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE;gBACvD,OAAO,EAAE,OAAO,CAAC,+BAA+B;gBAChD,IAAI,EAAE,SAAS,CAAC,0BAA0B;gBAC1C,KAAK,EAAE,SAAS,CAAC,qDAAqD;gBACtE,GAAG,EAAE,SAAS,CAAC,0BAA0B;gBACzC,IAAI,EAAE,SAAS,CAAC,0BAA0B;gBAC1C,MAAM,EAAE,IAAI;gBACZ,MAAM,EAAE,SAAS,CAAC,0BAA0B;gBAC5C,MAAM,EAAE,SAAS,CAAC,0BAA0B,CAAC,qBAAqB;gBAClE,4BAA4B;aAC7B,CAAC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAEM,WAAW,CAAC,GAAS;QAC1B,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC;CAKF;AA5BD,sCA4BC","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 type { DateFormatter } from \"@itwin/appui-abstract\";\n\n/**\n * A basic class that allows user to provide an Intl.DateTimeFormat\n * that can be used to format the date and time display. If no format is\n * specified a default format will be used. This default implementation does not\n * support parsing, so when used by [[DatePickerPopup]] the edit field will be readonly. If\n * a parseData function is implemented then the edit field will be editable.\n * @alpha\n * @deprecated in 4.11.0. Use {@link https://itwinui.bentley.com/docs/datepicker iTwinUI date picker} instead.\n */\nexport class IntlFormatter implements DateFormatter {\n  constructor(private _intlFormatter?: Intl.DateTimeFormat) {}\n\n  public get formatter(): Intl.DateTimeFormat {\n    if (!this._intlFormatter) {\n      // https://tc39.es/ecma402/#sec-intl-datetimeformat-constructor\n      this._intlFormatter = new Intl.DateTimeFormat(undefined, {\n        weekday: \"short\" /* \"narrow\", \"short\", \"long\" */,\n        year: \"numeric\" /* \"2-digit\", \"numeric\" */,\n        month: \"2-digit\" /* \"2-digit\", \"numeric\", \"narrow\", \"short\", \"long\" */,\n        day: \"2-digit\" /* \"2-digit\", \"numeric\" */,\n        hour: \"numeric\" /* \"2-digit\", \"numeric\" */,\n        hour12: true,\n        minute: \"numeric\" /* \"2-digit\", \"numeric\" */,\n        second: \"numeric\" /* \"2-digit\", \"numeric\" */ /* \"short\", \"long\" */,\n        /* timeZoneName:\t\"short\", */\n      });\n    }\n    return this._intlFormatter;\n  }\n\n  public formateDate(day: Date) {\n    return this.formatter.format(day);\n  }\n\n  // The default implementation does not currently support parsing. If a derived class supports parsing then the\n  // parseDate function must be implemented.\n  // parseDate(dateString: string): Date|undefined {}\n}\n"]}

package/lib/cjs/components-react/datepicker/TimeField.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TimeField.d.ts","sourceRoot":"","sources":["../../../../src/components-react/datepicker/TimeField.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,kBAAkB,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuBD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,YAAY,GACb,EAAE,cAAc,qBAyUhB"}