@workday/canvas-kit-preview-react 5.3.0-next.3 → 5.3.0-next.32

package/dist/es6/form-field/lib/hooks/useFormFieldInput.js

@@ -0,0 +1,14 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+/**
+ * Adds the necessary props to an `Input` component.
+ * Used by the FormField.Input subcomponent and other input type components
+ */
+export var useFormFieldInput = createHook(function (_a) {
+    var state = _a.state;
+    return {
+        required: state.isRequired ? true : undefined,
+        'aria-invalid': state.hasError ? true : undefined,
+        'aria-describedby': "hint-" + state.id,
+        id: "input-" + state.id,
+    };
+});

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export declare const useFormFieldLabel: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    htmlFor: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useFormFieldLabel.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldLabel.tsx"],"names":[],"mappings":";AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;OAI5B,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js

@@ -0,0 +1,11 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the FormField.Label subcomponent and other input type components
+ */
+export var useFormFieldLabel = createHook(function (_a) {
+    var state = _a.state;
+    return {
+        htmlFor: "input-" + state.id,
+    };
+});

package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts

@@ -0,0 +1,36 @@
+import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
+declare type FormFieldState = {
+    /**
+     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default `useUniqueId()`
+     */
+    id?: string;
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     * @default false
+     */
+    isRequired?: boolean;
+};
+declare type FormFieldEvents = {};
+export declare type FormFieldModel = Model<FormFieldState, FormFieldEvents>;
+declare const formFieldEventMap: {
+    guards: {};
+    callbacks: {};
+};
+export declare type FormFieldModelConfig = FormFieldState & Partial<ToModelConfig<FormFieldState, FormFieldEvents, typeof formFieldEventMap>>;
+export declare const useFormFieldModel: (config?: FormFieldModelConfig) => Model<FormFieldState, FormFieldEvents>;
+export {};
+//# sourceMappingURL=useFormFieldModel.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,aAAK,cAAc,GAAG;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,aAAK,eAAe,GAAG,EAAE,CAAC;AAE1B,oBAAY,cAAc,GAAG,KAAK,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAEpE,QAAA,MAAM,iBAAiB;;;CAGrB,CAAC;AAEH,oBAAY,oBAAoB,GAAG,cAAc,GAC/C,OAAO,CAAC,aAAa,CAAC,cAAc,EAAE,eAAe,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAEpF,eAAO,MAAM,iBAAiB,2EAe7B,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldModel.js

@@ -0,0 +1,19 @@
+import { createEventMap, useEventMap, useUniqueId, } from '@workday/canvas-kit-react/common';
+var formFieldEventMap = createEventMap()({
+    guards: {},
+    callbacks: {},
+});
+export var useFormFieldModel = function (config) {
+    if (config === void 0) { config = {}; }
+    var id = useUniqueId(config.id);
+    var state = {
+        hasError: config.hasError,
+        isRequired: config.isRequired,
+        id: id,
+    };
+    var events = useEventMap(formFieldEventMap, state, config, {});
+    return {
+        state: state,
+        events: events,
+    };
+};

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ */
+export declare const useFormFieldOrientation: (orientation: "horizontal" | "vertical") => {
+    flexDirection: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+    alignItems: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "stretch" | "center" | "end" | "flex-end" | "flex-start" | "start" | "baseline" | "normal" | "self-end" | "self-start" | undefined;
+    spacing: number | (string & {}) | "s" | "zero" | "m" | "l" | "xl" | "xxxs" | "xxs" | "xs" | "xxl" | "xxxl";
+};
+//# sourceMappingURL=useFormFieldOrientation.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,uBAAuB;;;;CAsBnC,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldOrientation.js

@@ -0,0 +1,22 @@
+import { space } from '@workday/canvas-kit-react/tokens';
+/**
+ * Adds the necessary layout props to a `FormField` component.
+ */
+export var useFormFieldOrientation = function (orientation) {
+    var layoutProps;
+    if (orientation === 'horizontal') {
+        layoutProps = {
+            flexDirection: 'row',
+            spacing: space.l,
+            alignItems: 'center',
+        };
+    }
+    else {
+        layoutProps = {
+            flexDirection: 'column',
+            spacing: space.xxxs,
+            alignItems: 'flex-start',
+        };
+    }
+    return layoutProps;
+};

package/dist/es6/index.d.ts

@@ -1,6 +1,9 @@
 export * from './breadcrumbs';
 export * from './color-picker';
+export * from './form-field';
 export * from './menu';
 export * from './select';
 export * from './side-panel';
+export * from './text-area';
+export * from './text-input';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/es6/index.js

@@ -1,5 +1,9 @@
 export * from './breadcrumbs';
 export * from './color-picker';
+export * from './form-field';
 export * from './menu';
 export * from './select';
 export * from './side-panel';
+export * from './text-area';
+export * from './text-input';
+/// <reference types="@types/node" />

package/dist/es6/menu/lib/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAEhF,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAU;IACpB,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,wCAQ3B;IAEK,sBAAsB,sCAE3B;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,wCAQ3B;IAEK,sBAAsB,sCAE3B;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}

package/dist/es6/menu/lib/Menu.js

@@ -35,10 +35,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from '@emotion/styled';
-import uuid from 'uuid/v4';
 import { Card } from '@workday/canvas-kit-react/card';
 import { commonColors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { hideMouseFocus } from '@workday/canvas-kit-react/common';
+import { hideMouseFocus, generateUniqueId } from '@workday/canvas-kit-react/common';
 var List = styled('ul')(__assign({ background: commonColors.background, borderRadius: borderRadius.m, padding: 0, margin: space.xxs + " 0", '&:focus': {
         outline: 'none',
     } }, hideMouseFocus));
@@ -46,7 +45,7 @@ var Menu = /** @class */ (function (_super) {
     __extends(Menu, _super);
     function Menu(props) {
         var _this = _super.call(this, props) || this;
-        _this.id = uuid();
+        _this.id = generateUniqueId();
         _this.getNormalizedItemIndex = function (index) {
             var itemCount = React.Children.count(_this.props.children);
             var firstItem = 0;

package/dist/es6/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAA0C,MAAM,kCAAkC,CAAC;AAEpG,OAAmB,EAAC,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAKvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAmiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAmB,EAAC,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAmiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/es6/select/lib/Select.js

@@ -34,11 +34,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { ErrorType, createComponent, useForkRef } from '@workday/canvas-kit-react/common';
+import { ErrorType, createComponent, useForkRef, generateUniqueId, } from '@workday/canvas-kit-react/common';
 import { menuAnimationDuration } from './SelectMenu';
 import SelectBase from './SelectBase';
 import { getCorrectedIndexByValue } from './utils';
-import uuid from 'uuid/v4';
 var SelectContainer = /** @class */ (function (_super) {
     __extends(SelectContainer, _super);
     function SelectContainer(props) {
@@ -76,14 +75,14 @@ var SelectContainer = /** @class */ (function (_super) {
                 var disabled, id, label, value;
                 if (typeof option === 'string') {
                     disabled = false;
-                    id = uuid();
+                    id = generateUniqueId();
                     value = option;
                     label = option;
                 }
                 else {
                     data = option.data || data;
                     disabled = !!option.disabled;
-                    id = option.id || uuid();
+                    id = option.id || generateUniqueId();
                     value = option.value;
                     label = option.label || option.value;
                 }

package/dist/es6/select/lib/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAWlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,QAAA,MAAM,UAAU,0JAqEf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,QAAA,MAAM,UAAU,0JAsEf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/es6/select/lib/SelectMenu.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import { ErrorType, styled } from '@workday/canvas-kit-react/common';
-import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
+import { Popper, useCloseOnEscape, useCloseOnOutsideClick, usePopupModel, useReturnFocus, useTransferOnFullscreenExit, } from '@workday/canvas-kit-react/popup';
 import { colors, borderRadius, inputColors } from '@workday/canvas-kit-react/tokens';
 import { buttonBorderWidth } from './SelectBase';
 export var menuAnimationDuration = 200;
@@ -203,6 +203,7 @@ var SelectMenu = function (_a) {
     useCloseOnEscape(model);
     useCloseOnOutsideClick(model);
     useReturnFocus(model);
+    useTransferOnFullscreenExit(model);
     return (React.createElement(Popper, { placement: placement, anchorElement: buttonRef, popperOptions: generatePopperOptions({
             menuRef: menuRef,
             placement: placement,

package/dist/es6/side-panel/lib/hooks.d.ts

@@ -9,12 +9,12 @@ export interface UseSidePanelProps {
     initialExpanded?: boolean;
     /**
      * sets the `id` for the panel
-     * @default `uuid`-generated string
+     * @default unique identifier
      */
     panelId?: string;
     /**
      * sets the `id` for the label
-     * @default `uuid`-generated string
+     * @default unique identifier
      */
     labelId?: string;
 }
@@ -28,12 +28,12 @@ export interface PanelProps {
     expanded: boolean;
     /**
      * the accessible `id`
-     * - this will either be a `uuid`-generated value or the `panelId` provided in the config
+     * - this will either be a unique identifier value or the `panelId` provided in the config
      */
     id: string;
     /**
      * the accessible label `id`
-     * - this will either be a `uuid`-generated value or the `labelId` provided in the config
+     * - this will either be a unique identifier value or the `labelId` provided in the config
      */
     'aria-labelledby': string;
     /**
@@ -45,14 +45,14 @@ export interface PanelProps {
 export interface LabelProps {
     /**
      * the accessible `id`
-     * - this will either be a `uuid`-generated value or the `labelId` provided in the config
+     * - this will either be a unique identifier value or the `labelId` provided in the config
      */
     id: string;
 }
 export interface ControlProps {
     /**
      * the accessible `id` that connects the panel to this control
-     * - this will either be a `uuid`-generated value or the `panelId` provided in the config
+     * - this will either be a unique identifier value or the `panelId` provided in the config
      */
     'aria-controls': string;
     /**
@@ -62,7 +62,7 @@ export interface ControlProps {
     'aria-expanded': boolean;
     /**
      * the accessible label `id`
-     * - this will either be a `uuid`-generated value or the `labelId` provided in the config
+     * - this will either be a unique identifier value or the `labelId` provided in the config
      */
     'aria-labelledby': string;
     /**

package/dist/es6/text-area/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/TextArea';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/text-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-area/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/es6/text-area/index.js

@@ -0,0 +1 @@
+export * from './lib/TextArea';

package/dist/es6/text-area/lib/TextArea.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+import { TextAreaModel } from './hooks';
+export declare const TextAreaModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>>;
+export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
+    model?: TextAreaModel;
+    /**
+     * Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
+     */
+    children: React.ReactNode;
+}
+export declare const TextArea: import("@workday/canvas-kit-react/common").Component<TextAreaProps> & {
+    Field: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", import("./TextAreaField").TextAreaFieldProps>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+};
+//# sourceMappingURL=TextArea.d.ts.map

package/dist/es6/text-area/lib/TextArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,SAAS,EAAiD,MAAM,8CAA8C,CAAC;AAGvH,OAAO,EAAE,aAAa,EAAoB,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}

package/dist/es6/text-area/lib/TextArea.js

@@ -0,0 +1,47 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
+import { FormFieldModelContext, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
+import { Stack } from '@workday/canvas-kit-labs-react/layout';
+import { useTextAreaModel } from './hooks';
+import { TextAreaField } from './TextAreaField';
+import { TextAreaLabel } from './TextAreaLabel';
+import { TextAreaHint } from './TextAreaHint';
+export var TextAreaModelContext = FormFieldModelContext;
+export var TextArea = createComponent()({
+    displayName: 'TextArea',
+    Component: function (_a, ref) {
+        var children = _a.children, model = _a.model, orientation = _a.orientation, props = __rest(_a, ["children", "model", "orientation"]);
+        var hasError = props.hasError, id = props.id, isRequired = props.isRequired, elemProps = __rest(props, ["hasError", "id", "isRequired"]);
+        var value = useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, useTextAreaModel);
+        var layoutProps = useFormFieldOrientation(orientation);
+        return (React.createElement(TextAreaModelContext.Provider, { value: value },
+            React.createElement(Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
+    },
+    subComponents: {
+        Field: TextAreaField,
+        Label: TextAreaLabel,
+        Hint: TextAreaHint,
+    },
+});

package/dist/es6/text-area/lib/TextAreaField.d.ts

@@ -0,0 +1,8 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+import { TextAreaModel } from './hooks';
+export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
+    model?: TextAreaModel;
+}
+export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", TextAreaFieldProps>;
+//# sourceMappingURL=TextAreaField.d.ts.map

package/dist/es6/text-area/lib/TextAreaField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAE1G,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,eAAO,MAAM,aAAa,6FAiCxB,CAAC"}

package/dist/es6/text-area/lib/TextAreaField.js

@@ -0,0 +1,63 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { borderRadius, inputColors, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
+import { createComponent, useModelContext, useTheme } from '@workday/canvas-kit-react/common';
+import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+import { TextAreaModelContext } from './TextArea';
+var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition: '0.2s box-shadow, 0.2s border-color', resize: 'both', '&::webkit-resizer': {
+        display: 'none',
+    }, '&::placeholder': {
+        color: inputColors.placeholder,
+    }, '&:hover': {
+        borderColor: inputColors.hoverBorder,
+    }, '&:focus:not([disabled])': {
+        outline: 'none',
+    }, '&:disabled': {
+        backgroundColor: inputColors.disabled.background,
+        borderColor: inputColors.disabled.border,
+        color: inputColors.disabled.text,
+        '&::placeholder': {
+            color: inputColors.disabled.text,
+        },
+    } });
+export var TextAreaField = createComponent('textarea')({
+    displayName: 'TextArea.Field',
+    Component: function (_a, ref) {
+        var model = _a.model, elemProps = __rest(_a, ["model"]);
+        var localModel = useModelContext(TextAreaModelContext, model);
+        var theme = useTheme();
+        var errorRing = useThemedRing('error');
+        var focusStyles = localModel.state.hasError
+            ? errorRing
+            : {
+                '&:focus:not([disabled])': {
+                    borderColor: theme.canvas.palette.common.focusOutline,
+                    boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
+                },
+            };
+        return (jsx(FormField.Input, __assign({ as: "textarea", ref: ref, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display: 'block', backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
+    },
+});

package/dist/es6/text-area/lib/TextAreaHint.d.ts

@@ -0,0 +1,5 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+export declare type TextAreaHintProps = ExtractProps<typeof FormField.Hint, never>;
+export declare const TextAreaHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+//# sourceMappingURL=TextAreaHint.d.ts.map

package/dist/es6/text-area/lib/TextAreaHint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaHint.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaHint.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,iBAAiB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAE3E,eAAO,MAAM,YAAY,mIAAiB,CAAC"}

package/dist/es6/text-area/lib/TextAreaHint.js

@@ -0,0 +1,2 @@
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+export var TextAreaHint = FormField.Hint;

package/dist/es6/text-area/lib/TextAreaLabel.d.ts

@@ -0,0 +1,5 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+export declare type TextAreaLabelProps = ExtractProps<typeof FormField.Label, never>;
+export declare const TextAreaLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
+//# sourceMappingURL=TextAreaLabel.d.ts.map

package/dist/es6/text-area/lib/TextAreaLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaLabel.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAEvE,oBAAY,kBAAkB,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAE7E,eAAO,MAAM,aAAa,yIAAkB,CAAC"}

package/dist/es6/text-area/lib/TextAreaLabel.js

@@ -0,0 +1,2 @@
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+export var TextAreaLabel = FormField.Label;

package/dist/es6/text-area/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useTextAreaModel';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/text-area/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/es6/text-area/lib/hooks/index.js

@@ -0,0 +1 @@
+export * from './useTextAreaModel';

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts

@@ -0,0 +1,8 @@
+import { FormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
+export declare const useTextAreaModel: (config?: import("../../../form-field").FormFieldModelConfig) => import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>;
+export declare type TextAreaModel = FormFieldModel;
+//# sourceMappingURL=useTextAreaModel.d.ts.map

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACf,MAAM,8CAA8C,CAAC;AAEtD,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}

package/dist/es6/text-area/lib/hooks/useTextAreaModel.js

@@ -0,0 +1,2 @@
+import { useFormFieldModel, } from '@workday/canvas-kit-preview-react/form-field';
+export var useTextAreaModel = useFormFieldModel;

package/dist/es6/text-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/TextInput';
+export * from './lib/hooks';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/text-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../text-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC"}

package/dist/es6/text-input/index.js

@@ -0,0 +1,2 @@
+export * from './lib/TextInput';
+export * from './lib/hooks';

package/dist/es6/text-input/lib/TextInput.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-preview-react/form-field';
+import { TextInputModel } from './hooks';
+export declare const TextInputModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    id?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>>;
+export interface TextInputProps extends ExtractProps<typeof FormField, never> {
+    model?: TextInputModel;
+    /**
+     * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
+     */
+    children: React.ReactNode;
+}
+export declare const TextInput: import("@workday/canvas-kit-react/common").Component<TextInputProps> & {
+    Field: import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInputField").TextInputFieldProps>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+};
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/es6/text-input/lib/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,SAAS,EAAiD,MAAM,8CAA8C,CAAC;AAGvH,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAgB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}