@kaizen/components 3.3.1 → 3.3.3

package/dist/esm/src/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { Button } from '../../../ButtonV1/Button/Button.mjs';
@@ -8,124 +8,121 @@ import { Heading } from '../../../Heading/Heading.mjs';
 import { Icon } from '../../../Icon/Icon.mjs';
 import { Text } from '../../../Text/Text.mjs';
 import modules_6900a44e from './GenericTile.module.css.mjs';
-const GenericTile = /*#__PURE__*/function () {
-  const GenericTile = function (_a) {
-    var children = _a.children,
-      title = _a.title,
-      _b = _a.titleTag,
-      titleTag = _b === void 0 ? 'h3' : _b,
-      metadata = _a.metadata,
-      information = _a.information,
-      infoButtonLabel = _a.infoButtonLabel,
-      _c = _a.variant,
-      variant = _c === void 0 ? 'default' : _c,
-      footer = _a.footer,
-      classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "title", "titleTag", "metadata", "information", "infoButtonLabel", "variant", "footer", "classNameOverride"]);
-    var _d = useState(),
-      isFlipped = _d[0],
-      setIsFlipped = _d[1];
-    var formatMessage = useIntl().formatMessage;
-    var infoButtonRef = useRef(null);
-    var infoButtonReturnRef = useRef(null);
-    useEffect(function () {
-      if (isFlipped === true) return infoButtonReturnRef.current.focus();
-      if (isFlipped === false) return infoButtonRef.current.focus();
-    }, [isFlipped]);
-    var translatedInfoLabel = formatMessage({
-      id: 'kzGenericTile.infoButtonLabel',
-      defaultMessage: 'View more information:',
-      description: 'Prompts user to interact with button to reveal more information'
-    });
-    var renderTitle = function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: modules_6900a44e.title
-      }, /*#__PURE__*/React.createElement(Heading, {
-        variant: "heading-3",
-        tag: titleTag
-      }, title), metadata && (/*#__PURE__*/React.createElement("div", {
-        className: modules_6900a44e.titleMeta
-      }, /*#__PURE__*/React.createElement(Text, {
-        variant: "small",
-        color: "dark-reduced-opacity"
-      }, metadata))));
-    };
-    var renderFront = function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(modules_6900a44e.face, modules_6900a44e.faceFront, modules_6900a44e[variant])
-      }, information && (/*#__PURE__*/React.createElement("div", {
-        className: modules_6900a44e.informationBtn
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        label: infoButtonLabel !== null && infoButtonLabel !== void 0 ? infoButtonLabel : "".concat(translatedInfoLabel, " ").concat(title),
-        icon: /*#__PURE__*/React.createElement(Icon, {
-          name: "info",
-          isPresentational: true,
-          isFilled: true
-        }),
-        onClick: function () {
-          return setIsFlipped(true);
-        },
-        disabled: isFlipped,
-        "aria-hidden": isFlipped,
-        ref: infoButtonRef
-      }))), renderTitle(), /*#__PURE__*/React.createElement("div", {
-        className: modules_6900a44e.children
-      }, children && children), footer && /*#__PURE__*/React.createElement("div", {
+var GenericTile = function (_a) {
+  var children = _a.children,
+    title = _a.title,
+    _b = _a.titleTag,
+    titleTag = _b === void 0 ? 'h3' : _b,
+    metadata = _a.metadata,
+    information = _a.information,
+    infoButtonLabel = _a.infoButtonLabel,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'default' : _c,
+    footer = _a.footer,
+    classNameOverride = _a.classNameOverride,
+    restProps = __rest(_a, ["children", "title", "titleTag", "metadata", "information", "infoButtonLabel", "variant", "footer", "classNameOverride"]);
+  var _d = useState(),
+    isFlipped = _d[0],
+    setIsFlipped = _d[1];
+  var formatMessage = useIntl().formatMessage;
+  var infoButtonRef = useRef(null);
+  var infoButtonReturnRef = useRef(null);
+  useEffect(function () {
+    if (isFlipped === true) return infoButtonReturnRef.current.focus();
+    if (isFlipped === false) return infoButtonRef.current.focus();
+  }, [isFlipped]);
+  var translatedInfoLabel = formatMessage({
+    id: 'kzGenericTile.infoButtonLabel',
+    defaultMessage: 'View more information:',
+    description: 'Prompts user to interact with button to reveal more information'
+  });
+  var renderTitle = function () {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.title
+    }, /*#__PURE__*/React__default.createElement(Heading, {
+      variant: "heading-3",
+      tag: titleTag
+    }, title), metadata && (/*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.titleMeta
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      variant: "small",
+      color: "dark-reduced-opacity"
+    }, metadata))));
+  };
+  var renderFront = function () {
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classnames(modules_6900a44e.face, modules_6900a44e.faceFront, modules_6900a44e[variant])
+    }, information && (/*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.informationBtn
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      label: infoButtonLabel !== null && infoButtonLabel !== void 0 ? infoButtonLabel : "".concat(translatedInfoLabel, " ").concat(title),
+      icon: /*#__PURE__*/React__default.createElement(Icon, {
+        name: "info",
+        isPresentational: true,
+        isFilled: true
+      }),
+      onClick: function () {
+        return setIsFlipped(true);
+      },
+      disabled: isFlipped,
+      "aria-hidden": isFlipped,
+      ref: infoButtonRef
+    }))), renderTitle(), /*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.children
+    }, children && children), footer && /*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.footer
+    }, footer));
+  };
+  var renderInformation = function (informationProp) {
+    var _a;
+    if (informationProp && typeof informationProp === 'object' && 'text' in informationProp) {
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Text, {
+        variant: "body"
+      }, informationProp.text), ((_a = informationProp.primaryAction) !== null && _a !== void 0 ? _a : informationProp.secondaryAction) && (/*#__PURE__*/React__default.createElement("div", {
         className: modules_6900a44e.footer
-      }, footer));
-    };
-    var renderInformation = function (informationProp) {
-      var _a;
-      if (informationProp && typeof informationProp === 'object' && 'text' in informationProp) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
-          variant: "body"
-        }, informationProp.text), ((_a = informationProp.primaryAction) !== null && _a !== void 0 ? _a : informationProp.secondaryAction) && (/*#__PURE__*/React.createElement("div", {
-          className: modules_6900a44e.footer
-        }, /*#__PURE__*/React.createElement("div", {
-          className: modules_6900a44e.actions
-        }, informationProp.secondaryAction && (/*#__PURE__*/React.createElement(Button, __assign({
-          secondary: true,
-          disabled: !isFlipped
-        }, informationProp.secondaryAction))), informationProp.primaryAction && (/*#__PURE__*/React.createElement(Button, __assign({
-          disabled: !isFlipped
-        }, informationProp.primaryAction)))))));
-      }
-      return informationProp;
-    };
-    var renderBack = function () {
-      if (!information) return null;
-      var returnButtonLabel = formatMessage({
-        id: 'kzGenericTile.infoButtonReturnLabel',
-        defaultMessage: 'Hide information:',
-        description: 'Prompts user to interact with button to hide information'
-      });
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames(modules_6900a44e.face, modules_6900a44e.faceBack)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: modules_6900a44e.informationBtn
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        label: "".concat(returnButtonLabel, " ").concat(title),
-        icon: /*#__PURE__*/React.createElement(Icon, {
-          name: "arrow_back",
-          isPresentational: true
-        }),
-        onClick: function () {
-          return setIsFlipped(false);
-        },
-        disabled: !isFlipped,
-        "aria-hidden": !isFlipped,
-        ref: infoButtonReturnRef
-      })), /*#__PURE__*/React.createElement("div", {
-        className: modules_6900a44e.information
-      }, renderInformation(information)));
-    };
-    return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(modules_6900a44e.root, classNameOverride)
-    }, restProps), /*#__PURE__*/React.createElement("div", {
-      className: classnames(modules_6900a44e.tile, isFlipped && modules_6900a44e.isFlipped)
-    }, isFlipped ? renderBack() : renderFront()));
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: modules_6900a44e.actions
+      }, informationProp.secondaryAction && (/*#__PURE__*/React__default.createElement(Button, __assign({
+        secondary: true,
+        disabled: !isFlipped
+      }, informationProp.secondaryAction))), informationProp.primaryAction && (/*#__PURE__*/React__default.createElement(Button, __assign({
+        disabled: !isFlipped
+      }, informationProp.primaryAction)))))));
+    }
+    return informationProp;
+  };
+  var renderBack = function () {
+    if (!information) return null;
+    var returnButtonLabel = formatMessage({
+      id: 'kzGenericTile.infoButtonReturnLabel',
+      defaultMessage: 'Hide information:',
+      description: 'Prompts user to interact with button to hide information'
+    });
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: classnames(modules_6900a44e.face, modules_6900a44e.faceBack)
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.informationBtn
+    }, /*#__PURE__*/React__default.createElement(IconButton, {
+      label: "".concat(returnButtonLabel, " ").concat(title),
+      icon: /*#__PURE__*/React__default.createElement(Icon, {
+        name: "arrow_back",
+        isPresentational: true
+      }),
+      onClick: function () {
+        return setIsFlipped(false);
+      },
+      disabled: !isFlipped,
+      "aria-hidden": !isFlipped,
+      ref: infoButtonReturnRef
+    })), /*#__PURE__*/React__default.createElement("div", {
+      className: modules_6900a44e.information
+    }, renderInformation(information)));
   };
-  GenericTile.displayName = 'GenericTile';
-  return GenericTile;
-}();
+  return /*#__PURE__*/React__default.createElement("div", __assign({
+    className: classnames(modules_6900a44e.root, classNameOverride)
+  }, restProps), /*#__PURE__*/React__default.createElement("div", {
+    className: classnames(modules_6900a44e.tile, isFlipped && modules_6900a44e.isFlipped)
+  }, isFlipped ? renderBack() : renderFront()));
+};
+GenericTile.displayName = 'GenericTile';
 export { GenericTile };

package/dist/esm/src/TimeField/TimeField.mjs

@@ -1,5 +1,5 @@
 import { __assign, __rest } from 'tslib';
-import React, { useId, useMemo } from 'react';
+import React__default, { useId, useMemo } from 'react';
 import { Time } from '@internationalized/date';
 import { useTimeField } from '@react-aria/datepicker';
 import { I18nProvider } from '@react-aria/i18n';
@@ -12,94 +12,88 @@ import modules_0db24a3e from './TimeField.module.css.mjs';
 
 // This needed to be placed directly below the props because
 // the prop descriptions wouldn't show in Storybook otherwise.
-const TimeField = /*#__PURE__*/function () {
-  const TimeField = function (props) {
-    return /*#__PURE__*/React.createElement(I18nProvider, {
-      locale: props.locale
-    }, /*#__PURE__*/React.createElement(TimeFieldComponent, __assign({}, props)));
+var TimeField = function (props) {
+  return /*#__PURE__*/React__default.createElement(I18nProvider, {
+    locale: props.locale
+  }, /*#__PURE__*/React__default.createElement(TimeFieldComponent, __assign({}, props)));
+};
+TimeField.displayName = 'TimeField';
+var TimeFieldComponent = function (_a) {
+  var propsId = _a.id,
+    label = _a.label,
+    locale = _a.locale,
+    onChange = _a.onChange,
+    value = _a.value,
+    _b = _a.status,
+    status = _b === void 0 ? 'default' : _b,
+    validationMessage = _a.validationMessage,
+    isDisabled = _a.isDisabled,
+    classNameOverride = _a.classNameOverride,
+    inputRef = _a.inputRef,
+    restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride", "inputRef"]);
+  var reactId = useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
+  var handleOnChange = function (timeValue) {
+    if (timeValue === null) {
+      return onChange(null);
+    }
+    onChange({
+      hour: timeValue.hour,
+      minutes: timeValue.minute
+    });
   };
-  TimeField.displayName = 'TimeField';
-  return TimeField;
-}();
-const TimeFieldComponent = /*#__PURE__*/function () {
-  const TimeFieldComponent = function (_a) {
-    var propsId = _a.id,
-      label = _a.label,
-      locale = _a.locale,
-      onChange = _a.onChange,
-      value = _a.value,
-      _b = _a.status,
-      status = _b === void 0 ? 'default' : _b,
-      validationMessage = _a.validationMessage,
-      isDisabled = _a.isDisabled,
-      classNameOverride = _a.classNameOverride,
-      inputRef = _a.inputRef,
-      restProps = __rest(_a, ["id", "label", "locale", "onChange", "value", "status", "validationMessage", "isDisabled", "classNameOverride", "inputRef"]);
-    var reactId = useId();
-    var id = propsId !== null && propsId !== void 0 ? propsId : reactId;
-    var handleOnChange = function (timeValue) {
-      if (timeValue === null) {
-        return onChange(null);
-      }
-      onChange({
-        hour: timeValue.hour,
-        minutes: timeValue.minute
-      });
-    };
-    var timeValue = useMemo(function () {
-      return value ? new Time(value.hour, value.minutes) : null;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [value === null || value === void 0 ? void 0 : value.hour, value === null || value === void 0 ? void 0 : value.minutes]);
-    var state = useTimeFieldState(__assign(__assign({}, restProps), {
-      value: timeValue,
-      onChange: handleOnChange,
+  var timeValue = useMemo(function () {
+    return value ? new Time(value.hour, value.minutes) : null;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [value === null || value === void 0 ? void 0 : value.hour, value === null || value === void 0 ? void 0 : value.minutes]);
+  var state = useTimeFieldState(__assign(__assign({}, restProps), {
+    value: timeValue,
+    onChange: handleOnChange,
+    isDisabled: isDisabled,
+    hideTimeZone: true,
+    locale: locale
+  }));
+  var hasError = !!validationMessage && status === 'error';
+  var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
+  var internalRef = React__default.useRef(null);
+  var _c = useTimeField(__assign(__assign({}, restProps), {
+      label: label,
       isDisabled: isDisabled,
-      hideTimeZone: true,
-      locale: locale
-    }));
-    var hasError = !!validationMessage && status === 'error';
-    var descriptionId = hasError ? "".concat(id, "-field-message") : undefined;
-    var internalRef = React.useRef(null);
-    var _c = useTimeField(__assign(__assign({}, restProps), {
-        label: label,
-        isDisabled: isDisabled,
-        'aria-describedby': descriptionId
-      }), state, internalRef),
-      fieldProps = _c.fieldProps,
-      labelProps = _c.labelProps;
-    var firstEditableIndex = state.segments.findIndex(function (s) {
-      return s.isEditable;
+      'aria-describedby': descriptionId
+    }), state, internalRef),
+    fieldProps = _c.fieldProps,
+    labelProps = _c.labelProps;
+  var firstEditableIndex = state.segments.findIndex(function (s) {
+    return s.isEditable;
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: classNameOverride
+  }, /*#__PURE__*/React__default.createElement(Label, __assign({
+    disabled: state.isDisabled
+  }, labelProps, {
+    classNameOverride: modules_0db24a3e.label
+  }), label), /*#__PURE__*/React__default.createElement("div", {
+    className: modules_0db24a3e.wrapper
+  }, /*#__PURE__*/React__default.createElement("div", __assign({}, fieldProps, {
+    id: id,
+    ref: internalRef,
+    className: classnames(modules_0db24a3e.input, state.isDisabled && modules_0db24a3e.isDisabled, status === 'error' && modules_0db24a3e.error)
+  }), state.segments.map(function (segment, i) {
+    return /*#__PURE__*/React__default.createElement(TimeSegment, {
+      key: i,
+      segment: segment,
+      state: state,
+      inputRef: i === firstEditableIndex ? inputRef : undefined,
+      hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNameOverride
-    }, /*#__PURE__*/React.createElement(Label, __assign({
-      disabled: state.isDisabled
-    }, labelProps, {
-      classNameOverride: modules_0db24a3e.label
-    }), label), /*#__PURE__*/React.createElement("div", {
-      className: modules_0db24a3e.wrapper
-    }, /*#__PURE__*/React.createElement("div", __assign({}, fieldProps, {
-      id: id,
-      ref: internalRef,
-      className: classnames(modules_0db24a3e.input, state.isDisabled && modules_0db24a3e.isDisabled, status === 'error' && modules_0db24a3e.error)
-    }), state.segments.map(function (segment, i) {
-      return /*#__PURE__*/React.createElement(TimeSegment, {
-        key: i,
-        segment: segment,
-        state: state,
-        inputRef: i === firstEditableIndex ? inputRef : undefined,
-        hasPadding: ![8294, 8297].includes(segment.text.charCodeAt(0))
-      });
-    }), /*#__PURE__*/React.createElement("div", {
-      className: modules_0db24a3e.focusRing
-    }))), hasError && /*#__PURE__*/React.createElement(FieldMessage, {
-      id: descriptionId,
-      message: validationMessage,
-      status: status
-    }));
-  };
-  TimeFieldComponent.displayName = 'TimeFieldComponent';
-  return TimeFieldComponent;
-}();
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: modules_0db24a3e.focusRing
+  }))), hasError && /*#__PURE__*/React__default.createElement(FieldMessage, {
+    id: descriptionId,
+    message: validationMessage,
+    status: status
+  }));
+};
+TimeFieldComponent.displayName = 'TimeFieldComponent';
 export { TimeField };

package/dist/esm/src/TimeField/subcomponents/TimeSegment/TimeSegment.mjs

@@ -1,31 +1,28 @@
 import { __assign } from 'tslib';
-import React from 'react';
+import React__default from 'react';
 import { useDateSegment } from '@react-aria/datepicker';
 import { mergeRefs } from '@react-aria/utils';
 import classnames from 'classnames';
 import { generateSegmentDisplayText } from './utils/generateSegmentDisplayText.mjs';
 import modules_0ac56f95 from './TimeSegment.module.css.mjs';
-const TimeSegment = /*#__PURE__*/function () {
-  const TimeSegment = function (_a) {
-    var segment = _a.segment,
-      state = _a.state,
-      _b = _a.hasPadding,
-      hasPadding = _b === void 0 ? true : _b,
-      inputRef = _a.inputRef;
-    var internalRef = React.useRef(null);
-    var segmentProps = useDateSegment(segment, state, internalRef).segmentProps;
-    // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
-    // This (in combination with the invisible character ​) creates boundaries
-    // for the element.
-    // https://stackoverflow.com/a/34445203
-    return /*#__PURE__*/React.createElement("span", {
-      className: modules_0ac56f95.timeSegmentWrapper
-    }, "\u200B", /*#__PURE__*/React.createElement("span", __assign({}, segmentProps, {
-      ref: mergeRefs(internalRef, inputRef),
-      className: classnames(modules_0ac56f95.timeSegment, segment.type === 'literal' && modules_0ac56f95.literal, segment.isPlaceholder && modules_0ac56f95.placeholder, segment.type === 'dayPeriod' && modules_0ac56f95.dayPeriod, hasPadding && modules_0ac56f95.hasPadding)
-    }), generateSegmentDisplayText(segment)), "\u200B");
-  };
-  TimeSegment.displayName = 'TimeSegment';
-  return TimeSegment;
-}();
+var TimeSegment = function (_a) {
+  var segment = _a.segment,
+    state = _a.state,
+    _b = _a.hasPadding,
+    hasPadding = _b === void 0 ? true : _b,
+    inputRef = _a.inputRef;
+  var internalRef = React__default.useRef(null);
+  var segmentProps = useDateSegment(segment, state, internalRef).segmentProps;
+  // Chrome has a bug where `contenteditable` elements receive focus from external clicks.
+  // This (in combination with the invisible character ​) creates boundaries
+  // for the element.
+  // https://stackoverflow.com/a/34445203
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: modules_0ac56f95.timeSegmentWrapper
+  }, "\u200B", /*#__PURE__*/React__default.createElement("span", __assign({}, segmentProps, {
+    ref: mergeRefs(internalRef, inputRef),
+    className: classnames(modules_0ac56f95.timeSegment, segment.type === 'literal' && modules_0ac56f95.literal, segment.isPlaceholder && modules_0ac56f95.placeholder, segment.type === 'dayPeriod' && modules_0ac56f95.dayPeriod, hasPadding && modules_0ac56f95.hasPadding)
+  }), generateSegmentDisplayText(segment)), "\u200B");
+};
+TimeSegment.displayName = 'TimeSegment';
 export { TimeSegment };