@kaizen/components 0.0.0-canary-rollup-cjs-20240408010936 → 0.0.0-canary-rollup-cjs-20240408013052

package/dist/esm/__future__/Select/Select.mjs

@@ -0,0 +1,79 @@
+import { __rest, __assign } from 'tslib';
+import React, { useId, useState, useEffect } from 'react';
+import { useButton } from '@react-aria/button';
+import { useSelect, HiddenSelect } from '@react-aria/select';
+import { useSelectState } from '@react-stately/select';
+import classnames from 'classnames';
+import { FieldMessage } from '../../FieldMessage/FieldMessage.mjs';
+import { Popover } from '../../MultiSelect/subcomponents/Popover/Popover.mjs';
+import { useFloating } from '@floating-ui/react-dom';
+import { SelectProvider } from './context/SelectContext.mjs';
+import { ListBox } from './subcomponents/ListBox/ListBox.mjs';
+import { ListBoxSection } from './subcomponents/ListBoxSection/ListBoxSection.mjs';
+import { ListItem } from './subcomponents/ListItem/ListItem.mjs';
+import './subcomponents/ListItems/ListItems.mjs';
+import { Option } from './subcomponents/Option/Option.mjs';
+import './subcomponents/Overlay/Overlay.mjs';
+import { SectionDivider } from './subcomponents/SectionDivider/SectionDivider.mjs';
+import { SelectPopoverContents } from './subcomponents/SelectPopoverContents/SelectPopoverContents.mjs';
+import { SelectToggle } from './subcomponents/SelectToggle/SelectToggle.mjs';
+import { getDisabledKeysFromItems } from './utils/getDisabledKeysFromItems.mjs';
+import { transformSelectItemToCollectionElement } from './utils/transformSelectItemToCollectionElement.mjs';
+import styles from './Select.module.scss.mjs';
+
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
+ */
+var Select = function (_a) {
+    var _b;
+    var label = _a.label, items = _a.items, propsId = _a.id, trigger = _a.trigger, children = _a.children, status = _a.status, validationMessage = _a.validationMessage, isReversed = _a.isReversed, isFullWidth = _a.isFullWidth, disabledValues = _a.disabledValues, classNameOverride = _a.classNameOverride, selectedKey = _a.selectedKey, description = _a.description, placeholder = _a.placeholder, isDisabled = _a.isDisabled, portalContainerId = _a.portalContainerId, restProps = __rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
+    var refs = useFloating().refs;
+    var triggerRef = refs.reference;
+    var id = propsId !== null && propsId !== void 0 ? propsId : useId();
+    var descriptionId = "".concat(id, "--description");
+    var popoverId = "".concat(id, "--popover");
+    var disabledKeys = getDisabledKeysFromItems(items);
+    var ariaSelectProps = __assign({ label: label, items: items, children: transformSelectItemToCollectionElement, disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys, selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey, description: description, placeholder: placeholder, isDisabled: isDisabled }, restProps);
+    var state = useSelectState(ariaSelectProps);
+    var _c = useSelect(ariaSelectProps, state, triggerRef), labelProps = _c.labelProps, reactAriaTriggerProps = _c.triggerProps, valueProps = _c.valueProps, menuProps = _c.menuProps, errorMessageProps = _c.errorMessageProps, descriptionProps = _c.descriptionProps;
+    // Hack incoming:
+    // react-aria/useSelect wants to prefix the combobox's accessible name with the value of the select.
+    // We use role=combobox, meaning screen readers will read the value.
+    // So we're modifying the `aria-labelledby` property to remove the value element id.
+    // Issue: https://github.com/adobe/react-spectrum/issues/4091
+    var reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"];
+    var triggerProps = __assign(__assign({}, reactAriaTriggerProps), { "aria-labelledby": reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(" ") + 1) });
+    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    var selectToggleProps = __assign(__assign({}, buttonProps), { label: label, labelProps: labelProps, value: (_b = state === null || state === void 0 ? void 0 : state.selectedItem) === null || _b === void 0 ? void 0 : _b.rendered, valueProps: valueProps, isOpen: state.isOpen, placeholder: placeholder, status: status, isDisabled: triggerProps.isDisabled, isReversed: isReversed, ref: refs.setReference });
+    var _d = useState(), portalContainer = _d[0], setPortalContainer = _d[1];
+    useEffect(function () {
+        if (portalContainerId) {
+            var portalElement = document.getElementById(portalContainerId);
+            portalElement && setPortalContainer(portalElement);
+        }
+    }, []);
+    return (React.createElement("div", { className: classnames(!isFullWidth && styles.notFullWidth, classNameOverride) },
+        React.createElement(HiddenSelect, { label: label, name: id, state: state, triggerRef: triggerRef }),
+        React.createElement("div", { className: styles.container },
+            trigger === undefined ? (React.createElement(SelectToggle, __assign({}, selectToggleProps))) : (trigger(selectToggleProps, selectToggleProps.ref)),
+            state.isOpen && (React.createElement(Popover, { id: popoverId, portalContainer: portalContainer, refs: refs, focusOnProps: {
+                    onEscapeKey: state.close,
+                    onClickOutside: state.close,
+                    noIsolation: true,
+                } },
+                React.createElement(SelectProvider, { state: state },
+                    React.createElement(SelectPopoverContents, { menuProps: menuProps }, children))))),
+        validationMessage && (React.createElement(FieldMessage, __assign({}, errorMessageProps, { message: validationMessage, status: status, reversed: isReversed }))),
+        description && (React.createElement(FieldMessage, __assign({}, descriptionProps, { id: descriptionId, message: description, reversed: isReversed })))));
+};
+Select.displayName = "Select";
+Select.Section = ListBoxSection;
+Select.SectionDivider = SectionDivider;
+Select.Option = Option;
+Select.ItemDefaultRender = ListItem;
+// @deprecated Legacy exported aliases
+Select.TriggerButton = SelectToggle;
+Select.ListBox = ListBox;
+
+export { Select };

package/dist/esm/__future__/Select/Select.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"container":"Select-module_container__TaMKg","notFullWidth":"Select-module_notFullWidth__Mr-3G"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/Workflow.mjs

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Footer } from './subcomponents/Footer/Footer.mjs';
+import './subcomponents/Footer/components/Root/Root.mjs';
+import { ProgressStepper } from './subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs';
+import './subcomponents/Footer/components/FooterActions/FooterActions.mjs';
+import { Header } from './subcomponents/Header/Header.mjs';
+import './subcomponents/Header/components/Titles/Titles.mjs';
+import './subcomponents/Header/components/Actions/Actions.mjs';
+import './subcomponents/Header/components/Branding/Branding.mjs';
+import './subcomponents/Header/components/Root/Root.mjs';
+import { Main } from './subcomponents/Main/Main.mjs';
+import { Wrapper } from './subcomponents/Wrapper/Wrapper.mjs';
+
+var Workflow = function (_a) {
+    var steps = _a.steps, currentStepId = _a.currentStepId, isComplete = _a.isComplete, workflowName = _a.workflowName, status = _a.status, headerActions = _a.headerActions, children = _a.children, nextAction = _a.nextAction, previousAction = _a.previousAction, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["steps", "currentStepId", "isComplete", "workflowName", "status", "headerActions", "children", "nextAction", "previousAction", "classNameOverride"]);
+    var currentStep = steps.find(function (step) { return step.id === currentStepId; });
+    return (React.createElement(Workflow.Wrapper, __assign({ classNameOverride: classNameOverride }, restProps),
+        React.createElement(Workflow.Header, { workflowName: workflowName, stepName: currentStep.label, status: status, headerActions: headerActions }),
+        React.createElement(Workflow.Main, null, children),
+        React.createElement(Workflow.Footer, { currentStepId: currentStepId, steps: steps, isComplete: isComplete, nextAction: nextAction, previousAction: previousAction })));
+};
+Workflow.Header = Header;
+Workflow.Footer = Footer;
+Workflow.Main = Main;
+Workflow.ProgressStepper = ProgressStepper;
+Workflow.Wrapper = Wrapper;
+
+export { Workflow };

package/dist/esm/__future__/Workflow/subcomponents/Footer/Footer.mjs

@@ -0,0 +1,16 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { FooterRoot } from './components/Root/Root.mjs';
+import { ProgressStepper } from './components/ProgressStepper/ProgressStepper.mjs';
+import { FooterAction } from './components/FooterActions/FooterActions.mjs';
+
+var Footer = function (_a) {
+    var steps = _a.steps, currentStepId = _a.currentStepId, isComplete = _a.isComplete, previousAction = _a.previousAction, nextAction = _a.nextAction, restProps = __rest(_a, ["steps", "currentStepId", "isComplete", "previousAction", "nextAction"]);
+    return (React.createElement(FooterRoot, __assign({}, restProps),
+        React.createElement(FooterAction, { action: previousAction, actionType: "Previous" }),
+        React.createElement(ProgressStepper, { steps: steps, currentStepId: currentStepId, isComplete: isComplete }),
+        React.createElement(FooterAction, { action: nextAction, actionType: "Next" })));
+};
+Footer.displayName = "Workflow.Footer";
+
+export { Footer };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.mjs

@@ -0,0 +1,16 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FooterActions.module.scss.mjs';
+
+/** A simple wrapper for a Footer previous or next action  */
+var FooterAction = function (_a) {
+    var _b = _a.actionType, actionType = _b === void 0 ? "Previous" : _b, action = _a.action, restProps = __rest(_a, ["actionType", "action"]);
+    return (React.createElement("div", __assign({ className: classnames([
+            styles.footerAction,
+            styles["footerAction".concat(actionType)],
+        ]) }, restProps), action));
+};
+FooterAction.displayName = "Workflow.FooterActions";
+
+export { FooterAction };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"footerAction":"FooterActions-module_footerAction__v7eL-","footerActionPrevious":"FooterActions-module_footerActionPrevious__2XByZ","footerActionNext":"FooterActions-module_footerActionNext__IKRta"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.mjs

@@ -0,0 +1,57 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import '../../../../../../Icon/subcomponents/SVG/SVG.mjs';
+import { IndicatorActiveIcon } from '../../../../../../Icon/IndicatorActiveIcon.mjs';
+import { IndicatorInactiveIcon } from '../../../../../../Icon/IndicatorInactiveIcon.mjs';
+import { SuccessIcon } from '../../../../../../Icon/SuccessIcon.mjs';
+import { Text } from '../../../../../../Text/Text.mjs';
+import { VisuallyHidden } from '../../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './ProgressStepper.module.scss.mjs';
+
+var getStepStatus = function (isComplete, isCurrentStep, step, index) {
+    if (isComplete) {
+        return {
+            icon: (React.createElement(SuccessIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "success" })),
+            accessibleName: "Completed: ".concat(step.label),
+        };
+    }
+    if (isCurrentStep) {
+        return {
+            icon: (React.createElement(IndicatorActiveIcon, { key: index, inheritSize: true, role: "presentation", classNameOverride: "active" })),
+            accessibleName: "Current: ".concat(step.label),
+        };
+    }
+    return {
+        icon: (React.createElement(IndicatorInactiveIcon, { key: index, inheritSize: true, classNameOverride: "incomplete", role: "presentation" })),
+        accessibleName: "Not started: ".concat(step.label),
+    };
+};
+var ProgressStepper = function (_a) {
+    var currentStepId = _a.currentStepId, steps = _a.steps, _b = _a.isComplete, isComplete = _b === void 0 ? false : _b, restprops = __rest(_a, ["currentStepId", "steps", "isComplete"]);
+    var currentStepIndex = steps.findIndex(function (stepItem) { return stepItem.id === currentStepId; });
+    return (React.createElement("div", { className: styles.stepsContainer },
+        React.createElement("ol", __assign({ className: styles.stepList }, restprops, { "aria-labelledby": "stepper-description" }), steps.map(function (step, index) {
+            var isCurrentStep = currentStepIndex === index;
+            var isCompletedStep = index < currentStepIndex || isComplete;
+            var _a = getStepStatus(isCompletedStep, isCurrentStep, step, index), accessibleName = _a.accessibleName, Icon = _a.icon;
+            return (React.createElement("li", { className: styles.step, key: "".concat(step.id), "aria-current": isCurrentStep },
+                React.createElement("div", { className: styles.stepContent },
+                    React.createElement(VisuallyHidden, null, accessibleName),
+                    React.createElement(Text, { classNameOverride: styles.stepName, variant: "small", color: "white", "aria-hidden": true }, step.label),
+                    React.createElement("div", { className: styles.stepIndicator },
+                        React.createElement("span", { className: styles.stepIcon }, Icon)),
+                    index < steps.length - 1 && (React.createElement("div", { className: classnames([
+                            styles.stepDivider,
+                            isCompletedStep && styles.completedStep,
+                        ]) })))));
+        })),
+        React.createElement(Text, { classNameOverride: styles.stepperDescription, variant: "small", color: "white", id: "stepper-description" },
+            "Step ",
+            currentStepIndex + 1,
+            " of ",
+            steps.length)));
+};
+ProgressStepper.displayName = "Workflow.ProgressStepper";
+
+export { ProgressStepper };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"stepsContainer":"ProgressStepper-module_stepsContainer__WMxXN","stepList":"ProgressStepper-module_stepList__b1wWX","step":"ProgressStepper-module_step__-Ep19","stepContent":"ProgressStepper-module_stepContent__B4uFS","stepIndicator":"ProgressStepper-module_stepIndicator__-qEWT","stepName":"ProgressStepper-module_stepName__hS4lp","stepIcon":"ProgressStepper-module_stepIcon__0Kh4y","stepDivider":"ProgressStepper-module_stepDivider__KEZPU","stepperDescription":"ProgressStepper-module_stepperDescription__B00hX"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/Root/FooterRoot.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"footerRoot":"FooterRoot-module_footerRoot__N-6nQ"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Footer/components/Root/Root.mjs

@@ -0,0 +1,12 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './FooterRoot.module.scss.mjs';
+
+var FooterRoot = function (_a) {
+    var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+    return (React.createElement("footer", __assign({ className: classnames(styles.footerRoot, classNameOverride) }, restProps), children));
+};
+FooterRoot.displayName = "Workflow.FooterRoot";
+
+export { FooterRoot };

package/dist/esm/__future__/Workflow/subcomponents/Header/Header.mjs

@@ -0,0 +1,17 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Titles } from './components/Titles/Titles.mjs';
+import { Actions } from './components/Actions/Actions.mjs';
+import { Branding } from './components/Branding/Branding.mjs';
+import { HeaderRoot } from './components/Root/Root.mjs';
+
+var Header = function (_a) {
+    var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, headerActions = _a.headerActions, restProps = __rest(_a, ["workflowName", "stepName", "status", "headerActions"]);
+    return (React.createElement(HeaderRoot, __assign({}, restProps),
+        React.createElement(Branding, { alt: "Cultureamp" }),
+        React.createElement(Titles, { workflowName: workflowName, stepName: stepName, status: status }),
+        React.createElement(Actions, { headerActions: headerActions })));
+};
+Header.displayName = "Workflow.Header";
+
+export { Header };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Actions/Actions.mjs

@@ -0,0 +1,12 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import styles from './Actions.module.scss.mjs';
+
+/** A wrapper for an exit trigger (and other) actions of the Header Workflow  */
+var Actions = function (_a) {
+    var headerActions = _a.headerActions, restProps = __rest(_a, ["headerActions"]);
+    return (React.createElement("div", __assign({ className: styles.actions }, restProps), headerActions === null || headerActions === void 0 ? void 0 : headerActions.map(function (action, index) { return (React.createElement(action.type, __assign({ key: "header-actions ".concat(index) }, action.props))); })));
+};
+Actions.displayName = "Workflow.Actions";
+
+export { Actions };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Actions/Actions.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"actions":"Actions-module_actions__Prrp0"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Branding/Branding.mjs

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Brand } from '../../../../../../Brand/Brand.mjs';
+import styles from './Branding.module.scss.mjs';
+
+var Branding = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? "logo-horizontal" : _b, alt = _a.alt;
+    return (React.createElement("div", { className: styles.branding },
+        React.createElement(Brand, { classNameOverride: styles.logo, variant: variant, alt: alt })));
+};
+Branding.displayName = "Workflow.Branding";
+
+export { Branding };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Branding/Branding.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"branding":"Branding-module_branding__4h-rD","logo":"Branding-module_logo__vqqec"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Root/Root.mjs

@@ -0,0 +1,12 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Root.module.scss.mjs';
+
+var HeaderRoot = function (_a) {
+    var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+    return (React.createElement("header", __assign({ className: classnames(styles.root, classNameOverride) }, restProps), children));
+};
+HeaderRoot.displayName = "Workflow.HeaderRoot";
+
+export { HeaderRoot };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Root/Root.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"root":"Root-module_root__7DVw5"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Titles/Titles.mjs

@@ -0,0 +1,23 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Heading } from '../../../../../../Heading/Heading.mjs';
+import { Tag } from '../../../../../../Tag/Tag.mjs';
+import { VisuallyHidden } from '../../../../../../VisuallyHidden/VisuallyHidden.mjs';
+import styles from './Titles.module.scss.mjs';
+
+var Titles = function (_a) {
+    var workflowName = _a.workflowName, stepName = _a.stepName, status = _a.status, restProps = __rest(_a, ["workflowName", "stepName", "status"]);
+    return (React.createElement("div", __assign({ className: styles.titles }, restProps),
+        React.createElement(Heading, { variant: "heading-1", tag: "h1", color: "dark", classNameOverride: styles.pageTitle },
+            React.createElement(Heading, { classNameOverride: styles.prefix, variant: "heading-6", tag: "span", color: "dark-reduced-opacity" },
+                workflowName,
+                React.createElement(VisuallyHidden, null, ":")),
+            React.createElement("span", null, stepName)),
+        status && (
+        // status may need to be update by a fetch
+        React.createElement("div", { className: styles.status },
+            React.createElement(Tag, { inline: true, variant: (status === null || status === void 0 ? void 0 : status.variant) || "statusDraft" }, status === null || status === void 0 ? void 0 : status.content)))));
+};
+Titles.displayName = "Workflow.Titles";
+
+export { Titles };

package/dist/esm/__future__/Workflow/subcomponents/Header/components/Titles/Titles.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"titles":"Titles-module_titles__JYwU0","pageTitle":"Titles-module_pageTitle__YDp9S","prefix":"Titles-module_prefix__40x8n","status":"Titles-module_status__huuP7"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Main/Main.mjs

@@ -0,0 +1,12 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Main.module.scss.mjs';
+
+var Main = function (_a) {
+    var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+    return (React.createElement("main", __assign({ className: classnames([styles.main, classNameOverride]) }, restProps), children));
+};
+Main.displayName = "Workflow.Main";
+
+export { Main };

package/dist/esm/__future__/Workflow/subcomponents/Main/Main.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"main":"Main-module_main__hMyB1"};
+
+export { styles as default };

package/dist/esm/__future__/Workflow/subcomponents/Wrapper/Wrapper.mjs

@@ -0,0 +1,12 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Wrapper.module.scss.mjs';
+
+var Wrapper = function (_a) {
+    var children = _a.children, classNameOverride = _a.classNameOverride, restProps = __rest(_a, ["children", "classNameOverride"]);
+    return (React.createElement("div", __assign({ className: classnames(styles.wrapper, classNameOverride) }, restProps), children));
+};
+Wrapper.displayName = "Workflow.Wrapper";
+
+export { Wrapper };

package/dist/esm/__future__/Workflow/subcomponents/Wrapper/Wrapper.module.scss.mjs

@@ -0,0 +1,3 @@
+var styles = {"wrapper":"Wrapper-module_wrapper__89WmC"};
+
+export { styles as default };