@kaizen/components 1.38.4 → 1.38.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.38.4",
+  "version": "1.38.5",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -44,26 +44,26 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.4",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.0",
+    "@internationalized/date": "^3.5.1",
     "@kaizen/hosted-assets": "^2.0.3",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.0",
-    "@react-aria/datepicker": "^3.9.0",
-    "@react-aria/focus": "^3.15.0",
-    "@react-aria/i18n": "^3.9.0",
-    "@react-aria/listbox": "^3.11.2",
-    "@react-aria/menu": "^3.11.2",
-    "@react-aria/overlays": "^3.19.0",
-    "@react-aria/select": "^3.14.0",
-    "@react-aria/utils": "^3.22.0",
-    "@react-stately/collections": "^3.10.3",
-    "@react-stately/datepicker": "^3.9.0",
-    "@react-stately/list": "^3.10.1",
-    "@react-stately/menu": "^3.5.7",
-    "@react-stately/select": "^3.6.0",
+    "@react-aria/button": "^3.9.1",
+    "@react-aria/datepicker": "^3.9.1",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/i18n": "^3.10.0",
+    "@react-aria/listbox": "^3.11.3",
+    "@react-aria/menu": "^3.12.0",
+    "@react-aria/overlays": "^3.20.0",
+    "@react-aria/select": "^3.14.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-stately/collections": "^3.10.4",
+    "@react-stately/datepicker": "^3.9.1",
+    "@react-stately/list": "^3.10.2",
+    "@react-stately/menu": "^3.6.0",
+    "@react-stately/select": "^3.6.1",
     "@react-types/shared": "^3.22.0",
-    "classnames": "^2.3.2",
+    "classnames": "^2.5.1",
     "date-fns": "^2.30.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
@@ -96,10 +96,10 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.0.2",
-    "@cultureamp/i18n-react-intl": "^2.1.5",
+    "@cultureamp/frontend-apis": "^9.1.3",
+    "@cultureamp/i18n-react-intl": "^2.1.8",
     "@kaizen/design-tokens": "^10.3.17",
-    "@kaizen/tailwind": "^1.2.1",
+    "@kaizen/tailwind": "^1.2.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -108,7 +108,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.17",
+    "@types/react-dom": "^18.2.18",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.7",
     "agadoo": "^3.0.0",
@@ -117,12 +117,12 @@
     "concat-cli": "^4.0.0",
     "query-string": "^8.1.0",
     "react-intl": "^6.5.5",
-    "rollup": "^4.6.0",
+    "rollup": "^4.9.2",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^6.1.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.69.5",
+    "sass": "^1.69.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.1.0",
     "ts-jest": "^29.1.1",
@@ -130,7 +130,7 @@
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.5",
+    "@cultureamp/i18n-react-intl": "^2.1.8",
     "react": "^18.2.0",
     "react-intl": "^6.5.5"
   }

package/src/TimeField/TimeField.module.scss

@@ -18,7 +18,8 @@ $input-height: 48px;
   color: $color-purple-800;
 }
 
-.heading {
+.label {
+  display: block;
   margin-bottom: $spacing-6;
 }
 

package/src/TimeField/TimeField.tsx

@@ -8,7 +8,7 @@ import {
 } from "@react-stately/datepicker"
 import classnames from "classnames"
 import { FieldMessage } from "~components/FieldMessage"
-import { Heading } from "~components/Heading"
+import { Label } from "~components/Label"
 import { OverrideClassName } from "~types/OverrideClassName"
 import { TimeSegment } from "./subcomponents/TimeSegment"
 import { StatusType, TimeValue, ValueType } from "./types"
@@ -79,7 +79,9 @@ const TimeFieldComponent = ({
     locale,
     validationState: status === "default" ? "valid" : "invalid",
   })
-  const descriptionId = `${id}-field-message`
+
+  const hasError = !!validationMessage && status === "error"
+  const descriptionId = hasError ? `${id}-field-message` : undefined
 
   const inputRef = React.useRef(null)
   const { fieldProps, labelProps } = useTimeField(
@@ -94,17 +96,13 @@ const TimeFieldComponent = ({
   )
   return (
     <div className={classNameOverride}>
-      <Heading
-        tag="div"
-        variant="heading-6"
+      <Label
+        disabled={state.isDisabled}
         {...labelProps}
-        classNameOverride={classnames(
-          styles.heading,
-          state.isDisabled && styles.isDisabled
-        )}
+        classNameOverride={styles.label}
       >
         {label}
-      </Heading>
+      </Label>
       <div className={styles.wrapper}>
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
         <div
@@ -123,7 +121,7 @@ const TimeFieldComponent = ({
           <div className={styles.focusRing} />
         </div>
       </div>
-      {validationMessage && status === "error" && (
+      {hasError && (
         <FieldMessage
           id={descriptionId}
           message={validationMessage}