@dynatrace/strato-components 3.0.1 → 3.1.0

package/filters/timeframe-selector/Presets.d.ts

@@ -1,25 +0,0 @@
-import { type ReactNode } from 'react';
-import type { TimeframeSelectorPresetItemProps } from './Item.types.js';
-import { AriaLabelingProps } from '../../core/types/a11y-props.js';
-import { DataTestId } from '../../core/types/data-props.js';
-import { DOMProps } from '../../core/types/dom.js';
-import { StylingProps } from '../../core/types/styling-props.js';
-/**
- * @public
- */
-export interface TimeframeSelectorPresetsProps extends DOMProps, DataTestId, StylingProps, AriaLabelingProps {
-    /** Children shown inside the presets list.A default list of presets is shown if no children are set. */
-    children?: ReactNode;
-}
-/**
- * @public
- */
-export declare const TIMEFRAME_SELECTOR_PRESETS: Array<TimeframeSelectorPresetItemProps['value']>;
-/**
- * A list of preset items shown in the overlay.
- * @public
- */
-export declare const Presets: {
-    (props: TimeframeSelectorPresetsProps): import("react/jsx-runtime.js").JSX.Element;
-    displayName: string;
-};

package/filters/timeframe-selector/Presets.js

@@ -1,183 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var Presets_exports = {};
-__export(Presets_exports, {
-  Presets: () => Presets,
-  TIMEFRAME_SELECTOR_PRESETS: () => TIMEFRAME_SELECTOR_PRESETS
-});
-module.exports = __toCommonJS(Presets_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_clsx = __toESM(require("clsx"));
-var import_react = require("react");
-var import_react_intl = require("react-intl");
-var import_useTimeframeSelectorContext = require("./hooks/useTimeframeSelectorContext.js");
-var import_Item = require("./Item.js");
-var import_TimeframeSelectorPresets_css = require("./TimeframeSelectorPresets.sty.js");
-var import_useRovingFocus = require("../../core/hooks/useRovingFocus.js");
-var import_is_slot = require("../../core/utils/is-slot.js");
-var import_merge_props = require("../../core/utils/merge-props.js");
-var import_timeParser = require("../../forms/forms-core/time/timeParser.js");
-var import_Flex = require("../../layouts/flex/Flex.js");
-function getItemSlotsAndSelectedIndex(children, from, to, precision) {
-  const slots = {
-    items: null
-  };
-  let selectedPresetIndex = 0;
-  if (!children) {
-    return { ...slots, selectedPresetIndex };
-  }
-  for (const [index, child] of import_react.Children.toArray(children).entries()) {
-    if ((0, import_is_slot.isSlot)(child, import_Item.PresetItem)) {
-      const childProps = child.props;
-      const { from: propFrom, to: propTo } = (0, import_timeParser.parseValue)(
-        childProps.value,
-        false,
-        precision
-      );
-      const isSelected = from && from === propFrom?.value && to && to === propTo?.value;
-      slots.items = slots.items || [];
-      if (isSelected) {
-        selectedPresetIndex = index;
-        slots.items.push(
-          (0, import_react.cloneElement)(child, {
-            ...(0, import_merge_props.mergeProps)(child.props, { _isSelected: true })
-          })
-        );
-      } else {
-        slots.items.push(child);
-      }
-    } else {
-      console.warn(
-        "The used child is not supported by the TimeframeSelector.Presets."
-      );
-    }
-  }
-  return { ...slots, selectedPresetIndex };
-}
-const TIMEFRAME_SELECTOR_PRESETS = [
-  {
-    // Last 30 minutes
-    from: "now()-30m",
-    to: "now()"
-  },
-  {
-    // Last 1 hour
-    from: "now()-1h",
-    to: "now()"
-  },
-  {
-    // Last 2 hours
-    from: "now()-2h",
-    to: "now()"
-  },
-  {
-    // Today
-    from: "@d",
-    to: "now()"
-  },
-  {
-    // Yesterday
-    from: "-1d@d",
-    to: "@d"
-  },
-  {
-    // Last 24 hours
-    from: "now()-24h",
-    to: "now()"
-  },
-  {
-    // Last 7 days
-    from: "now()-7d",
-    to: "now()"
-  }
-];
-const Presets = (props) => {
-  const {
-    children,
-    "aria-label": ariaLabel,
-    className: consumerClassName,
-    style: consumerStyle,
-    "data-testid": dataTestId,
-    ...remainingProps
-  } = props;
-  const intl = (0, import_react_intl.useIntl)();
-  const { details, precision } = (0, import_useTimeframeSelectorContext.useTimeframeSelectorContext)();
-  const from = details?.from?.value;
-  const to = details?.to?.value;
-  const selectedDefaultPresetIndex = (0, import_react.useMemo)(
-    () => TIMEFRAME_SELECTOR_PRESETS.findIndex(
-      (preset) => preset.from === from && preset.to === to
-    ),
-    [from, to]
-  );
-  const { items, selectedPresetIndex } = (0, import_react.useMemo)(
-    () => getItemSlotsAndSelectedIndex(children, from, to, precision),
-    [children, from, to, precision]
-  );
-  const { containerRef } = (0, import_useRovingFocus.useRovingFocus)({
-    initialIndex: items ? selectedPresetIndex : selectedDefaultPresetIndex,
-    direction: "vertical",
-    focusableChildrenSelector: "[role='option'][aria-disabled='false']"
-  });
-  const presetsListLabel = ariaLabel ?? intl.formatMessage({
-    defaultMessage: "List of timeframe presets",
-    id: "v8C2Lvq2DZvfWbNV",
-    description: "Aria label for the list of timeframe presets"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Flex.Flex,
-    {
-      paddingLeft: 0,
-      paddingRight: 0,
-      flexDirection: "column",
-      style: { overflowY: "auto" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "ul",
-        {
-          ref: containerRef,
-          role: "listbox",
-          "aria-label": presetsListLabel,
-          className: (0, import_clsx.default)([import_TimeframeSelectorPresets_css.timeframeSelectorPresetsCSS, consumerClassName]),
-          style: consumerStyle,
-          "data-testid": dataTestId,
-          ...remainingProps,
-          children: items ?? TIMEFRAME_SELECTOR_PRESETS.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_Item.PresetItem,
-            {
-              value: item,
-              _isSelected: selectedDefaultPresetIndex === index
-            },
-            `${item.from} \u2192 ${item.to}`
-          ))
-        }
-      )
-    }
-  );
-};
-Presets["displayName"] = "TimeframeSelector.Presets";

package/filters/timeframe-selector/TimeframeSelectorOverlay.js

@@ -1,212 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TimeframeSelectorOverlay_exports = {};
-__export(TimeframeSelectorOverlay_exports, {
-  TimeframeSelectorOverlay: () => TimeframeSelectorOverlay
-});
-module.exports = __toCommonJS(TimeframeSelectorOverlay_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_tz = require("@date-fns/tz");
-var import_clsx = __toESM(require("clsx"));
-var import_react = require("react");
-var import_react_intl = require("react-intl");
-var import_spacings = __toESM(require("@dynatrace/strato-design-tokens/spacings"));
-var import_user_preferences = require("@dynatrace-sdk/user-preferences");
-var import_CustomTimeframeSelector = require("./CustomTimeframeSelector.js");
-var import_Presets = require("./Presets.js");
-var import_TimeframeSelector_css = require("./TimeframeSelector.sty.js");
-var import_timeframeSelectorMessages = require("./utils/timeframeSelectorMessages.js");
-var import_Button = require("../../buttons/button/Button.js");
-var import_FocusScope = require("../../core/components/focus-scope/FocusScope.js");
-var import_OverlayContainer = require("../../core/components/OverlayContainer.js");
-var import_useOverlayStacking = require("../../core/hooks/useOverlayStacking.js");
-var import_OverlayStackingProvider = require("../../core/providers/OverlayStackingProvider.js");
-var import_useDateTimeFormat = require("../../forms/date-time-picker/hooks/useDateTimeFormat.js");
-var import_Divider = require("../../layouts/divider/Divider.js");
-var import_Flex = require("../../layouts/flex/Flex.js");
-var import_useOverlay = require("../../overlays/hooks/useOverlay.js");
-var import_safe_sprinkles = require("../../styles/safe-sprinkles.js");
-var import_ExternalLink = require("../../typography/external-link/ExternalLink.js");
-var import_Text = require("../../typography/text/Text.js");
-function getMaxWidth(toParts) {
-  const placeholderFromOrToParts = toParts(new import_tz.TZDateMini()).map(
-    (part) => part.value
-  );
-  const placeholderFromOrTo = placeholderFromOrToParts.join("");
-  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;
-  const surroundingSpace = 22;
-  return `${placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for "0" instead of a placeholder char, which needs slightly more width
-  surroundingSpace}ch`;
-}
-const TimeframeSelectorOverlay = (0, import_react.forwardRef)((props, forwardedRef) => {
-  const {
-    overlayProps,
-    clearable,
-    precision,
-    children,
-    overlayClose,
-    onChange,
-    "data-dtrum-mask": dataDtrumMask,
-    "data-dtrum-allow": dataDtrumAllow
-  } = props;
-  const intl = (0, import_react_intl.useIntl)();
-  const {
-    trapFocus,
-    style: overlayPropsStyle,
-    ...remainingOverlayProps
-  } = overlayProps;
-  const overlayContainerProps = (0, import_useOverlayStacking.useOverlayStacking)(void 0, "overlay");
-  function handleClearSelection() {
-    onChange?.(null);
-  }
-  const { toParts } = (0, import_useDateTimeFormat.useDateTimeFormat)("datetime", precision);
-  const timeZoneWithOffset = (0, import_react.useMemo)(() => {
-    const timeZone = (0, import_user_preferences.getTimezone)();
-    const parts = new Intl.DateTimeFormat((0, import_user_preferences.getRegionalFormat)(), {
-      timeZone,
-      timeZoneName: "shortOffset"
-    }).formatToParts(import_tz.TZDateMini.tz(timeZone));
-    const partsShortName = new Intl.DateTimeFormat((0, import_user_preferences.getRegionalFormat)(), {
-      timeZone,
-      timeZoneName: "short"
-    }).formatToParts(import_tz.TZDateMini.tz(timeZone));
-    const timeZonePart = parts?.find((part) => part.type === "timeZoneName")?.value.replace("GMT", "UTC");
-    const timeZoneInfo = timeZonePart === "UTC" ? "UTC+0" : timeZonePart;
-    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : "";
-    const timeZoneShortName = partsShortName?.find(
-      (part) => part.type === "timeZoneName"
-    )?.value;
-    return `${timeZoneShortName}${timezoneDetails}`;
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_OverlayContainer.OverlayContainer,
-    {
-      ...overlayContainerProps,
-      "data-dtrum-mask": dataDtrumMask,
-      "data-dtrum-allow": dataDtrumAllow,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_OverlayStackingProvider.OverlayStackingProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FocusScope.FocusScope, { autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_Flex.Flex,
-        {
-          ref: forwardedRef,
-          gap: 4,
-          flexDirection: "column",
-          "aria-label": intl.formatMessage({
-            defaultMessage: "Timeframe selector overlay for providing a custom timeframe or selecting one of the presets",
-            id: "BcqdB7RacGy7tO8Z",
-            description: "Aria label for the overlay of the timeframe selector"
-          }),
-          className: import_TimeframeSelector_css.timeframeSelectorOverlayCSS,
-          style: {
-            ...overlayPropsStyle,
-            maxWidth: getMaxWidth(toParts)
-          },
-          ...remainingOverlayProps,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              import_Flex.Flex,
-              {
-                gap: 4,
-                flex: 1,
-                flexDirection: "column",
-                width: "100%",
-                padding: 4,
-                style: { boxSizing: "border-box", minHeight: 0 },
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CustomTimeframeSelector.CustomTimeframeSelector, {}),
-                  children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Presets.Presets, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                    import_Flex.Flex,
-                    {
-                      padding: 6,
-                      minWidth: 0,
-                      flex: 1,
-                      justifyContent: "space-between",
-                      alignItems: "center",
-                      flexWrap: "wrap-reverse",
-                      gap: 4,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-                          import_Flex.Flex,
-                          {
-                            justifyContent: clearable ? "flex-start" : "space-between",
-                            alignItems: "center",
-                            flexShrink: 1,
-                            flexGrow: 1,
-                            className: (0, import_clsx.default)((0, import_safe_sprinkles.globalSprinkles)({ paddingLeft: 6 }), {
-                              [(0, import_safe_sprinkles.globalSprinkles)({ paddingTop: 4, paddingBottom: 4 })]: !clearable
-                            }),
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { className: (0, import_clsx.default)(import_TimeframeSelector_css.timeframeSelectorHintCSS), children: timeZoneWithOffset }),
-                              clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Divider.Divider, { orientation: "vertical" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                import_Text.Text,
-                                {
-                                  as: import_ExternalLink.ExternalLink,
-                                  href: "https://dt-url.net/timeframe-selector",
-                                  textStyle: "small",
-                                  style: { paddingRight: import_spacings.default.Size6 },
-                                  children: intl.formatMessage(
-                                    import_timeframeSelectorMessages.TIMEFRAME_SELECTOR_MESSAGES.docsLinkText
-                                  )
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        clearable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          import_Button.Button,
-                          {
-                            type: "reset",
-                            onPointerDown: handleClearSelection,
-                            size: "condensed",
-                            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                              import_react_intl.FormattedMessage,
-                              {
-                                defaultMessage: "Reset timeframe",
-                                id: "EG+qZn4zIajJ41CP",
-                                description: "Shown for the reset timeframe button of the timeframe selector."
-                              }
-                            )
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_useOverlay.DismissButton, { onDismiss: overlayClose })
-          ]
-        }
-      ) }) })
-    }
-  );
-});
-TimeframeSelectorOverlay.displayName = "TimeframeSelectorOverlay";

package/filters/timeframe-selector/TimeframeSelectorPresets.sty.js

@@ -1,40 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var TimeframeSelectorPresets_css_exports = {};
-__export(TimeframeSelectorPresets_css_exports, {
-  timeframeSelectorPresetItemCSS: () => timeframeSelectorPresetItemCSS,
-  timeframeSelectorPresetItemContainerCSS: () => timeframeSelectorPresetItemContainerCSS,
-  timeframeSelectorPresetItemMediaQuery: () => timeframeSelectorPresetItemMediaQuery,
-  timeframeSelectorPresetItemNameCSS: () => timeframeSelectorPresetItemNameCSS,
-  timeframeSelectorPresetItemValueCSS: () => timeframeSelectorPresetItemValueCSS,
-  timeframeSelectorPresetSelectedIndicatorIcon: () => timeframeSelectorPresetSelectedIndicatorIcon,
-  timeframeSelectorPresetsCSS: () => timeframeSelectorPresetsCSS,
-  tooltipPresetItemWrapper: () => tooltipPresetItemWrapper
-});
-module.exports = __toCommonJS(TimeframeSelectorPresets_css_exports);
-var import_TimeframeSelectorPresets_css_ts_vanilla = require("./TimeframeSelectorPresets.css");
-var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var timeframeSelectorPresetItemCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1href791-3-0-1", variantClassNames: { state: { rest: "_1href792-3-0-1", selected: "_1href793-3-0-1", disabled: "_1href794-3-0-1" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var timeframeSelectorPresetItemContainerCSS = "_1href790-3-0-1";
-var timeframeSelectorPresetItemMediaQuery = "_1href79c-3-0-1";
-var timeframeSelectorPresetItemNameCSS = "_1href796-3-0-1";
-var timeframeSelectorPresetItemValueCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1href79d-3-0-1", variantClassNames: { state: { rest: "_1href79e-3-0-1", selected: "_1href79f-3-0-1", disabled: "_1href79g-3-0-1" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var timeframeSelectorPresetSelectedIndicatorIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1href79h-3-0-1", variantClassNames: { isDisabled: { true: "_1href79i-3-0-1", false: "_1href79j-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var timeframeSelectorPresetsCSS = "_1href79k-3-0-1";
-var tooltipPresetItemWrapper = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1href797-3-0-1", variantClassNames: { isSelected: { true: "_1href798-3-0-1", false: "_1href799-3-0-1" }, isDisabled: { true: "_1href79a-3-0-1", false: "_1href79b-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });