@kaizen/components 0.0.0-canary-unscrollable-20240221032028 → 0.0.0-canary-hidden-optintprovider-nav-20240307220309

package/locales/cy.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Problem wrth lwytho'r dudalen ar hyn o bryd. Ceisiwch eto neu ewch adref."
+    "message" : "Problem wrth lwytho'r dudalen ar hyn o bryd. Ceisiwch eto neu ewch adref."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Problem wrth lwytho'r dudalen"
+    "message" : "Problem wrth lwytho'r dudalen"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-unscrollable-20240221032028",
+  "version": "0.0.0-canary-hidden-optintprovider-nav-20240307220309",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -28,24 +28,24 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.8",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.5.1",
+    "@internationalized/date": "^3.5.2",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.9.2",
-    "@react-aria/datepicker": "^3.9.2",
-    "@react-aria/focus": "^3.16.1",
-    "@react-aria/i18n": "^3.10.1",
-    "@react-aria/listbox": "^3.11.4",
-    "@react-aria/menu": "^3.13.0",
-    "@react-aria/overlays": "^3.21.0",
-    "@react-aria/select": "^3.14.2",
-    "@react-aria/utils": "^3.23.1",
-    "@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",
+    "@react-aria/button": "^3.9.3",
+    "@react-aria/datepicker": "^3.9.3",
+    "@react-aria/focus": "^3.16.2",
+    "@react-aria/i18n": "^3.10.2",
+    "@react-aria/listbox": "^3.11.5",
+    "@react-aria/menu": "^3.13.1",
+    "@react-aria/overlays": "^3.21.1",
+    "@react-aria/select": "^3.14.3",
+    "@react-aria/utils": "^3.23.2",
+    "@react-stately/collections": "^3.10.5",
+    "@react-stately/datepicker": "^3.9.2",
+    "@react-stately/list": "^3.10.3",
+    "@react-stately/menu": "^3.6.1",
+    "@react-stately/select": "^3.6.2",
+    "@react-types/shared": "^3.22.1",
     "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "lodash.debounce": "^4.0.8",
@@ -60,11 +60,11 @@
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.32.7",
+    "prosemirror-view": "^1.33.1",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "^8.10.0",
-    "react-focus-lock": "^2.9.7",
-    "react-focus-on": "^3.9.1",
+    "react-focus-lock": "^2.11.2",
+    "react-focus-on": "^3.9.2",
     "react-media": "^1.10.0",
     "react-popper": "^2.3.0",
     "react-select": "^5.8.0",
@@ -80,8 +80,8 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.3.4",
-    "@cultureamp/i18n-react-intl": "^2.4.0",
+    "@cultureamp/frontend-apis": "^9.4.1",
+    "@cultureamp/i18n-react-intl": "^2.5.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -90,31 +90,31 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/react-dom": "^18.2.18",
+    "@types/react-dom": "^18.2.19",
     "@types/react-textfit": "^1.1.4",
     "@types/uuid": "^9.0.8",
     "agadoo": "^3.0.0",
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.18",
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
-    "query-string": "^8.2.0",
+    "query-string": "^9.0.0",
     "react-intl": "^6.6.2",
-    "rollup": "^4.9.6",
+    "rollup": "^4.12.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^7.0.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.70.0",
+    "sass": "^1.71.1",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.2",
     "ts-patch": "^3.1.2",
-    "typescript-transform-paths": "^3.4.6",
+    "typescript-transform-paths": "^3.4.7",
     "@kaizen/tailwind": "1.2.4",
     "@kaizen/design-tokens": "10.3.18"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.4.0",
+    "@cultureamp/i18n-react-intl": "^2.5.1",
     "react": "^18.2.0",
     "react-intl": "^6.6.2"
   },

package/src/BrandMoment/_docs/ExampleHeaders.scss

@@ -19,6 +19,7 @@
   flex: 0 0 50%;
   display: flex;
   justify-content: flex-end;
+  gap: $spacing-8;
 }
 
 .logoLink {

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -15,14 +15,12 @@ export const MinimalBasic = (): JSX.Element => (
       </a>
     </div>
     <div className={styles.headerRight}>
-      <div className="mr-8">
-        <Button
-          href="#"
-          label="Exit"
-          icon={<CloseIcon role="presentation" />}
-          secondary
-        />
-      </div>
+      <Button
+        href="#"
+        label="Exit"
+        icon={<CloseIcon role="presentation" />}
+        secondary
+      />
       <div className={styles.logoContainer}>
         <img src={assetUrl("brand/enso-default.svg")} alt="Culture Amp" />
       </div>

package/src/DatePicker/DatePicker.tsx

@@ -268,6 +268,7 @@ export const DatePicker = ({
   return (
     <FocusOn
       scrollLock={false}
+      returnFocus={false}
       onDeactivation={handleReturnFocus}
       onClickOutside={(): void => setIsOpen(false)}
       onEscapeKey={(): void => setIsOpen(false)}

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.mdx

@@ -0,0 +1,35 @@
+import { Controls, Meta, Canvas } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
+import * as FilterMultiSelectStories from "./FilterMultiSelect.stories"
+
+<Meta of={FilterMultiSelectStories} />
+
+# Filter Bar
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterMultiSelect"
+  className="!mb-8"
+/>
+
+<KAIOInstallation exportNames="FilterMultiSelect" />
+
+## API
+
+<NoClipCanvas of={FilterMultiSelectStories.Playground} />
+<Controls of={FilterMultiSelectStories.Playground} />
+
+## Examples
+
+The FilterMultiSelect is a component relies heavily on consumer implemntation. It is recommended that you use the below as a starting point, and ensure you follow best a11y practices.
+
+### With sections
+
+<Canvas of={FilterMultiSelectStories.WithSections} />
+
+### With section headers
+
+<Canvas of={FilterMultiSelectStories.WithSectionHeaders} />
+
+### Async
+
+<Canvas of={FilterMultiSelectStories.Async} />

package/src/KaizenProvider/KaizenProvider.tsx

@@ -26,7 +26,7 @@ export const KaizenProvider = ({
   }, [documentIsAvailable])
 
   return (
-    <OptionalIntlProvider locale={locale}>
+    // <OptionalIntlProvider locale={locale}>
       <>
         <ToastNotificationProvider>
           {notificationsList}
@@ -34,7 +34,7 @@ export const KaizenProvider = ({
         </ToastNotificationProvider>
         <FontDefinitions />
       </>
-    </OptionalIntlProvider>
+    // </OptionalIntlProvider>
   )
 }
 

package/src/MultiSelect/_docs/MultiSelect.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, SbReleaseNotification} from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as MultiSelectStories from "./MultiSelect.stories"
 
 <Meta of={MultiSelectStories} />
@@ -12,8 +12,6 @@ import * as MultiSelectStories from "./MultiSelect.stories"
   className="!mb-8"
 />
 
-<SbReleaseNotification />
-
 <KAIOInstallation exportNames="MultiSelect" />
 
 ## Overview

package/src/Slider/Slider.module.scss

@@ -11,6 +11,10 @@
   margin-bottom: $spacing-sm;
 }
 
+.label {
+  margin-bottom: $spacing-4;
+}
+
 @media (min-width: $layout-breakpoints-medium) {
   .labelInline {
     &.wrapper {

package/src/Slider/Slider.tsx

@@ -42,7 +42,7 @@ export const Slider = ({
         )}
       >
         <div className={styles.labelWrapper}>
-          <div className="mb-4">
+          <div className={styles.label}>
             <Label
               htmlFor={id}
               labelText={labelText}

package/src/Tile/MultiActionTile/MultiActionTile.module.scss

@@ -1,3 +1,9 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+
 .actions {
   display: flex;
 }
+
+.secondaryAction {
+  margin-inline-end: $spacing-8;
+}

package/src/Tile/MultiActionTile/MultiActionTile.tsx

@@ -18,7 +18,7 @@ const renderActions = (
 ): JSX.Element => (
   <div className={styles.actions}>
     {secondaryAction && (
-      <div className="mr-8">
+      <div className={styles.secondaryAction}>
         <Action action={secondaryAction} secondary />
       </div>
     )}

package/src/Tile/subcomponents/GenericTile/GenericTile.module.scss

@@ -37,6 +37,10 @@ $tilePaddingTop: $spacing-xl;
   }
 }
 
+.titleMeta {
+  padding-top: $spacing-4;
+}
+
 .face {
   position: absolute;
   background-color: $color-white;

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -57,7 +57,7 @@ export const GenericTile = ({
         {title}
       </Heading>
       {metadata && (
-        <div className="pt-4">
+        <div className={styles.titleMeta}>
           <Text variant="small" color="dark-reduced-opacity">
             {metadata}
           </Text>

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -6,6 +6,7 @@ import {
   SuccessIcon,
 } from "~components/Icon"
 import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.scss"
 
 export type ProgressStepperProps = {
@@ -93,10 +94,10 @@ export const ProgressStepper = ({
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
-                <span className="sr-only">
+                <VisuallyHidden>
                   {/* will need to be translated */}
                   {accessibleName}
-                </span>
+                </VisuallyHidden>
                 <Text
                   classNameOverride={styles.stepName}
                   variant="small"

package/src/Workflow/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Heading } from "~components/Heading"
 import { Tag, DefaultTagProps } from "~components/Tag"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Titles.module.scss"
 
@@ -36,7 +37,7 @@ export const Titles = ({
         color="dark-reduced-opacity"
       >
         {workflowName}
-        <span className="sr-only">:</span>
+        <VisuallyHidden>:</VisuallyHidden>
       </Heading>
       <span>{stepName}</span>
     </Heading>

package/src/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -6,6 +6,7 @@ import {
   SuccessIcon,
 } from "~components/Icon"
 import { Text } from "~components/Text"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import styles from "./ProgressStepper.module.scss"
 
 export type Step = {
@@ -104,10 +105,10 @@ export const ProgressStepper = ({
               aria-current={isCurrentStep}
             >
               <div className={styles.stepContent}>
-                <span className="sr-only">
+                <VisuallyHidden>
                   {/* will need to be translated */}
                   {accessibleName}
-                </span>
+                </VisuallyHidden>
                 <Text
                   classNameOverride={styles.stepName}
                   variant="small"

package/src/__future__/Workflow/subcomponents/Header/components/Titles/Titles.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from "react"
 import { Heading } from "~components/Heading"
 import { Tag, DefaultTagProps } from "~components/Tag"
+import { VisuallyHidden } from "~components/VisuallyHidden"
 import { OverrideClassName } from "~types/OverrideClassName"
 import styles from "./Titles.module.scss"
 
@@ -36,7 +37,7 @@ export const Titles = ({
         color="dark-reduced-opacity"
       >
         {workflowName}
-        <span className="sr-only">:</span>
+        <VisuallyHidden>:</VisuallyHidden>
       </Heading>
       <span>{stepName}</span>
     </Heading>

package/dist/cjs/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var React = require('react');
-var i18nReactIntl = require('@cultureamp/i18n-react-intl');
-var reactIntl = require('react-intl');
-const OptionalIntlProvider = /*#__PURE__*/function () {
-  const OptionalIntlProvider = function (_a) {
-    var locale = _a.locale,
-      children = _a.children;
-    var parent = React.useContext(reactIntl.IntlContext);
-    if (parent) return children;
-    return React.createElement(i18nReactIntl.StaticIntlProvider, {
-      locale: locale
-    }, children);
-  };
-  OptionalIntlProvider.displayName = "OptionalIntlProvider";
-  return OptionalIntlProvider;
-}();
-exports.OptionalIntlProvider = OptionalIntlProvider;
-//# sourceMappingURL=OptionalIntlProvider.cjs.map

package/dist/cjs/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionalIntlProvider.cjs","sources":["../../../../../src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { StaticIntlProvider } from \"@cultureamp/i18n-react-intl\"\nimport { IntlContext } from \"react-intl\"\n\ntype Props = {\n  locale: string\n  children: React.ReactElement\n}\nexport const OptionalIntlProvider = ({\n  locale,\n  children,\n}: Props): JSX.Element => {\n  const parent = useContext(IntlContext)\n\n  if (parent) return children\n  return <StaticIntlProvider locale={locale}>{children}</StaticIntlProvider>\n}\n\nOptionalIntlProvider.displayName = \"OptionalIntlProvider\"\n"],"names":["OptionalIntlProvider","_a","locale","children","parent","useContext","IntlContext","React","createElement","StaticIntlProvider","displayName"],"mappings":";;;;;MAQaA,oBAAoB;EAAA,MAApBA,oBAAoB,GAAG,SAAAA,CAACC,EAG7B,EAAA;QAFNC,MAAM,GAAAD,EAAA,CAAAC,MAAA;MACNC,QAAQ,GAAAF,EAAA,CAAAE,QAAA;IAER,IAAMC,MAAM,GAAGC,gBAAU,CAACC,SAAAA,CAAAA,WAAW,CAAC;IAEtC,IAAIF,MAAM,EAAE,OAAOD,QAAQ;IAC3B,OAAOI,KAAA,CAAAC,aAAA,CAACC,aAAkB,CAAAA,kBAAA,EAAC;MAAAP,MAAM,EAAEA;IAAM,CAAA,EAAGC,QAAQ,CAAsB;EAC5E,CAAC;EAEDH,oBAAoB,CAACU,WAAW,GAAG,sBAAsB;EAAA,OAV5CV,oBAAoB;AAAA;"}

package/dist/esm/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.mjs

@@ -1,18 +0,0 @@
-import React, { useContext } from 'react';
-import { StaticIntlProvider } from '@cultureamp/i18n-react-intl';
-import { IntlContext } from 'react-intl';
-const OptionalIntlProvider = /*#__PURE__*/function () {
-  const OptionalIntlProvider = function (_a) {
-    var locale = _a.locale,
-      children = _a.children;
-    var parent = useContext(IntlContext);
-    if (parent) return children;
-    return /*#__PURE__*/React.createElement(StaticIntlProvider, {
-      locale: locale
-    }, children);
-  };
-  OptionalIntlProvider.displayName = "OptionalIntlProvider";
-  return OptionalIntlProvider;
-}();
-export { OptionalIntlProvider };
-//# sourceMappingURL=OptionalIntlProvider.mjs.map

package/dist/esm/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionalIntlProvider.mjs","sources":["../../../../../src/KaizenProvider/subcomponents/OptionalIntlProvider/OptionalIntlProvider.tsx"],"sourcesContent":["import React, { useContext } from \"react\"\nimport { StaticIntlProvider } from \"@cultureamp/i18n-react-intl\"\nimport { IntlContext } from \"react-intl\"\n\ntype Props = {\n  locale: string\n  children: React.ReactElement\n}\nexport const OptionalIntlProvider = ({\n  locale,\n  children,\n}: Props): JSX.Element => {\n  const parent = useContext(IntlContext)\n\n  if (parent) return children\n  return <StaticIntlProvider locale={locale}>{children}</StaticIntlProvider>\n}\n\nOptionalIntlProvider.displayName = \"OptionalIntlProvider\"\n"],"names":["OptionalIntlProvider","_a","locale","children","parent","useContext","IntlContext","React","createElement","StaticIntlProvider","displayName"],"mappings":";;;MAQaA,oBAAoB;EAAA,MAApBA,oBAAoB,GAAG,SAAAA,CAACC,EAG7B,EAAA;QAFNC,MAAM,GAAAD,EAAA,CAAAC,MAAA;MACNC,QAAQ,GAAAF,EAAA,CAAAE,QAAA;IAER,IAAMC,MAAM,GAAGC,UAAU,CAACC,WAAW,CAAC;IAEtC,IAAIF,MAAM,EAAE,OAAOD,QAAQ;IAC3B,oBAAOI,KAAA,CAAAC,aAAA,CAACC,kBAAkB,EAAC;MAAAP,MAAM,EAAEA;IAAM,CAAA,EAAGC,QAAQ,CAAsB;EAC5E,CAAC;EAEDH,oBAAoB,CAACU,WAAW,GAAG,sBAAsB;EAAA,OAV5CV,oBAAoB;AAAA;"}