@workday/canvas-kit-labs-react 6.0.0-beta.0-next.15 → 6.0.2

package/dist/es6/text-input/lib/TextInputField.js

@@ -0,0 +1,64 @@
+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, space, type, } from '@workday/canvas-kit-react/tokens';
+import { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
+import { Box, useThemedRing, useThemeRTL } from '@workday/canvas-kit-labs-react/common';
+import { TextInputModelContext } from './TextInput';
+import { useTextInputField } from './hooks/useTextInputField';
+var baseStyles = __assign(__assign({}, type.levels.subtext.large), { padding: space.xxs, margin: 0, minWidth: '280px', border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m, display: 'block', height: '40px', transition: '0.2s box-shadow, 0.2s border-color', '&::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,
+        },
+    }, '::-ms-clear': {
+        display: 'none',
+    } });
+export var TextInputField = createComponent('input')({
+    displayName: 'TextInput.Field',
+    Component: function (_a, ref) {
+        var model = _a.model, elemProps = __rest(_a, ["model"]);
+        var localModel = useModelContext(TextInputModelContext, model);
+        var props = useTextInputField(localModel, elemProps, ref);
+        var _b = useThemeRTL(), themeRTL = _b.themeRTL, theme = _b.theme;
+        var errorRing = useThemedRing('error');
+        var focusStyles = localModel.state.hasError
+            ? errorRing
+            : themeRTL({
+                '&:focus:not([disabled])': {
+                    borderColor: theme.canvas.palette.common.focusOutline,
+                    boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
+                },
+            });
+        return jsx(Box, __assign({ as: "input", css: [themeRTL(baseStyles), focusStyles] }, props));
+    },
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { TextInputModel } from './hooks/useTextInputModel';
+export interface TextInputHintProps extends ExtractProps<typeof Box, never> {
+    model?: TextInputModel;
+    /**
+     * Hint text to show to the user regarding the Error/Alert
+     */
+    children?: React.ReactNode;
+}
+export declare const TextInputHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", TextInputHintProps>;
+//# sourceMappingURL=TextInputHint.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputHint.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAEhG,OAAO,EAAC,GAAG,EAAc,MAAM,uCAAuC,CAAC;AAGvE,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAQD,eAAO,MAAM,aAAa,sFAyBxB,CAAC"}

package/dist/es6/text-input/lib/TextInputHint.js

@@ -0,0 +1,44 @@
+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 { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
+import { space, type } from '@workday/canvas-kit-react/tokens';
+import { Box, useThemeRTL } from '@workday/canvas-kit-labs-react/common';
+import { TextInputModelContext } from './TextInput';
+import { useTextInputHint } from './hooks/useTextInputHint';
+var baseStyles = __assign(__assign({}, type.levels.subtext.medium), { margin: space.xxs + " 0 0", width: '100%' });
+export var TextInputHint = createComponent('p')({
+    displayName: 'TextInput.Hint',
+    Component: function (_a, ref, Element) {
+        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
+        var localModel = useModelContext(TextInputModelContext, model);
+        var props = useTextInputHint(localModel, elemProps, ref);
+        var _b = useThemeRTL(), themeRTL = _b.themeRTL, theme = _b.theme;
+        if (!children) {
+            // If there is no hint text just skip rendering
+            return null;
+        }
+        return (jsx(Box, __assign({ as: Element, css: themeRTL(baseStyles, localModel.state.hasError ? { color: theme.canvas.palette.error.main } : {}) }, props), children));
+    },
+});

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { TextInputModel } from './hooks/useTextInputModel';
+export interface TextInputLabelProps extends ExtractProps<typeof Box, never> {
+    model?: TextInputModel;
+    /**
+     * If true, apply the `accessibleHide` styles to the Label.
+     */
+    isVisuallyHidden?: boolean;
+    /**
+     * The text of the label.
+     */
+    children: React.ReactNode;
+}
+export declare const TextInputLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", TextInputLabelProps>;
+//# sourceMappingURL=TextInputLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInputLabel.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,YAAY,EAEb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAA+B,MAAM,uCAAuC,CAAC;AAKxF,OAAO,EAAC,cAAc,EAAC,MAAM,2BAA2B,CAAC;AAGzD,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkBD,eAAO,MAAM,cAAc,2FA2BzB,CAAC"}

package/dist/es6/text-input/lib/TextInputLabel.js

@@ -0,0 +1,52 @@
+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 { accessibleHide, createComponent, useModelContext, } from '@workday/canvas-kit-react/common';
+import { Box, useThemeRTL } from '@workday/canvas-kit-labs-react/common';
+import { type } from '@workday/canvas-kit-react/tokens';
+import { HStack } from '@workday/canvas-kit-labs-react/layout';
+import { TextInputModelContext } from './TextInput';
+import { useTextInputLabel } from './hooks/useTextInputLabel';
+var styles = {
+    label: __assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium, minWidth: '180px' }),
+    label_visuallyHidden: __assign({}, accessibleHide),
+    asterisk: {
+        fontSize: type.properties.fontSizes[16],
+        fontWeight: type.properties.fontWeights.regular,
+        textDecoration: 'unset',
+    },
+};
+export var TextInputLabel = createComponent('label')({
+    displayName: 'TextInput.Label',
+    Component: function (_a, ref) {
+        var isVisuallyHidden = _a.isVisuallyHidden, model = _a.model, children = _a.children, elemProps = __rest(_a, ["isVisuallyHidden", "model", "children"]);
+        var localModel = useModelContext(TextInputModelContext, model);
+        var props = useTextInputLabel(localModel, elemProps, ref);
+        var _b = useThemeRTL(), themeRTL = _b.themeRTL, theme = _b.theme;
+        return (jsx(Box, __assign({ as: "label", css: themeRTL(styles.label, isVisuallyHidden ? styles.label_visuallyHidden : {}) }, props),
+            jsx(HStack, { spacing: "xxxs" },
+                jsx("span", null, children),
+                localModel.state.isRequired && (jsx("span", { css: themeRTL(styles.asterisk, { color: theme.canvas.palette.error.main }), "aria-hidden": "true" }, "*")))));
+    },
+});

package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
+ */
+export declare const useTextInputField: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
+    hasError?: boolean | undefined;
+    inputId?: string | undefined;
+    hintId?: string | undefined;
+    isRequired?: boolean | undefined;
+}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    type: string;
+    required: boolean | undefined;
+    'aria-invalid': boolean | undefined;
+    'aria-describedby': string | undefined;
+    id: string | undefined;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useTextInputField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextInputField.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputField.tsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;OAQ5B,CAAC"}

package/dist/es6/text-input/lib/hooks/useTextInputField.js

@@ -0,0 +1,14 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+/**
+ * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
+ */
+export var useTextInputField = createHook(function (_a) {
+    var state = _a.state;
+    return {
+        type: 'text',
+        required: state.isRequired ? true : undefined,
+        'aria-invalid': state.hasError ? true : undefined,
+        'aria-describedby': state.hintId,
+        id: state.inputId,
+    };
+});

package/dist/es6/text-input/lib/hooks/useTextInputHint.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextInputHint.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputHint.tsx"],"names":[],"mappings":";AAGA;;GAEG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;OAI3B,CAAC"}

package/dist/es6/text-input/lib/hooks/useTextInputHint.js

@@ -0,0 +1,10 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+/**
+ * Adds the necessary props to a `Hint` component. Used by the TextInput.Hint subcomponent.
+ */
+export var useTextInputHint = createHook(function (_a) {
+    var state = _a.state;
+    return {
+        id: state.hintId,
+    };
+});

package/dist/es6/text-input/lib/hooks/useTextInputLabel.d.ts

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

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

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

package/dist/es6/text-input/lib/hooks/useTextInputLabel.js

@@ -0,0 +1,10 @@
+import { createHook } from '@workday/canvas-kit-react/common';
+/**
+ * Adds the necessary props to a `Label` component. Used by the TextInput.Label subcomponent.
+ */
+export var useTextInputLabel = createHook(function (_a) {
+    var state = _a.state;
+    return {
+        htmlFor: state.inputId,
+    };
+});

package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts

@@ -0,0 +1,17 @@
+import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
+declare type TextInputState = {
+    hasError?: boolean;
+    inputId?: string;
+    hintId?: string;
+    isRequired?: boolean;
+};
+declare type TextInputEvents = {};
+export declare type TextInputModel = Model<TextInputState, TextInputEvents>;
+declare const textInputEventMap: {
+    guards: {};
+    callbacks: {};
+};
+export declare type TextInputModelConfig = TextInputState & Partial<ToModelConfig<TextInputState, TextInputEvents, typeof textInputEventMap>>;
+export declare const useTextInputModel: (config?: TextInputModelConfig) => Model<TextInputState, TextInputEvents>;
+export {};
+//# sourceMappingURL=useTextInputModel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,aAAK,cAAc,GAAG;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,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,2EAiB7B,CAAC"}

package/dist/es6/text-input/lib/hooks/useTextInputModel.js

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