@spark-web/field 1.0.2 → 2.0.0

package/README.md

@@ -140,4 +140,4 @@ Mark the field as disabled by passing true to the disabled prop.
 | tone?            | 'critical' \| 'neutral' \| 'positive'    | 'neutral' | Provide a tone to influence elements of the field, and its input.                                                                                |
 
 [data-attribute-map]:
-  https://bitbucket.org/brighte-energy/energy/src/14a694872cc43bb454981bada65f5f12b56f77c9/spark-web/packages/utils-spark/src/buildDataAttributes.ts#spark-web/packages/utils-spark/src/buildDataAttributes.ts-1
+  https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1

package/dist/declarations/src/context.d.ts

@@ -1,10 +1,14 @@
 /// <reference types="react" />
-export declare type FieldContextType = {
-    'aria-describedby'?: string;
-    id: string;
+export declare type FieldState = {
     disabled: boolean;
     invalid: boolean;
 };
+export declare type InputPropsDerivedFromField = {
+    'aria-describedby'?: string;
+    'aria-invalid': true | undefined;
+    id: string;
+};
+export declare type FieldContextType = [FieldState, InputPropsDerivedFromField];
 export declare const FieldContext: import("react").Context<FieldContextType | null>;
 export declare const FieldContextProvider: import("react").Provider<FieldContextType | null>;
 export declare const FIELD_CONTEXT_ERROR_MESSAGE = "Input components must be inside a `Field`.";

package/dist/declarations/src/index.d.ts

@@ -1,4 +1,4 @@
-export { useFieldContext } from './context';
+export { FieldContextProvider, useFieldContext } from './context';
 export { Field, FieldMessage, useFieldIds } from './Field';
-export type { FieldContextType } from './context';
+export type { FieldContextType, FieldState, InputPropsDerivedFromField, } from './context';
 export type { FieldProps, Tone } from './Field';

package/dist/spark-web-field.cjs.dev.js

@@ -56,12 +56,15 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       messageId = _useFieldIds.messageId; // field context
 
 
-  var fieldContext = {
-    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
-    id: inputId,
+  var invalid = Boolean(message && tone === 'critical');
+  var fieldContext = [{
     disabled: disabled,
-    invalid: Boolean(message && tone === 'critical')
-  }; // label prep
+    invalid: invalid
+  }, {
+    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
+    'aria-invalid': invalid || undefined,
+    id: inputId
+  }]; // label prep
 
   var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
     as: "label",
@@ -77,7 +80,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
         inline: true,
         tone: disabled ? 'disabled' : 'neutral',
-        weight: "strong",
+        weight: "semibold",
         children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
           inline: true,
           tone: disabled ? 'disabled' : 'muted',
@@ -199,6 +202,7 @@ function IndicatorContainer(_ref3) {
 }
 
 exports.Field = Field;
+exports.FieldContextProvider = FieldContextProvider;
 exports.FieldMessage = FieldMessage;
 exports.useFieldContext = useFieldContext;
 exports.useFieldIds = useFieldIds;

package/dist/spark-web-field.cjs.prod.js

@@ -56,12 +56,15 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       messageId = _useFieldIds.messageId; // field context
 
 
-  var fieldContext = {
-    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
-    id: inputId,
+  var invalid = Boolean(message && tone === 'critical');
+  var fieldContext = [{
     disabled: disabled,
-    invalid: Boolean(message && tone === 'critical')
-  }; // label prep
+    invalid: invalid
+  }, {
+    'aria-describedby': a11y.mergeIds(message && messageId, description && descriptionId),
+    'aria-invalid': invalid || undefined,
+    id: inputId
+  }]; // label prep
 
   var hiddenLabel = /*#__PURE__*/jsxRuntime.jsxs(a11y.VisuallyHidden, {
     as: "label",
@@ -77,7 +80,7 @@ var Field = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
       children: /*#__PURE__*/jsxRuntime.jsxs(text.Text, {
         inline: true,
         tone: disabled ? 'disabled' : 'neutral',
-        weight: "strong",
+        weight: "semibold",
         children: [label, ' ', secondaryLabel && /*#__PURE__*/jsxRuntime.jsx(text.Text, {
           inline: true,
           tone: disabled ? 'disabled' : 'muted',
@@ -199,6 +202,7 @@ function IndicatorContainer(_ref3) {
 }
 
 exports.Field = Field;
+exports.FieldContextProvider = FieldContextProvider;
 exports.FieldMessage = FieldMessage;
 exports.useFieldContext = useFieldContext;
 exports.useFieldIds = useFieldIds;

package/dist/spark-web-field.esm.js

@@ -52,12 +52,15 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       messageId = _useFieldIds.messageId; // field context
 
 
-  var fieldContext = {
-    'aria-describedby': mergeIds(message && messageId, description && descriptionId),
-    id: inputId,
+  var invalid = Boolean(message && tone === 'critical');
+  var fieldContext = [{
     disabled: disabled,
-    invalid: Boolean(message && tone === 'critical')
-  }; // label prep
+    invalid: invalid
+  }, {
+    'aria-describedby': mergeIds(message && messageId, description && descriptionId),
+    'aria-invalid': invalid || undefined,
+    id: inputId
+  }]; // label prep
 
   var hiddenLabel = /*#__PURE__*/jsxs(VisuallyHidden, {
     as: "label",
@@ -73,7 +76,7 @@ var Field = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
       children: /*#__PURE__*/jsxs(Text, {
         inline: true,
         tone: disabled ? 'disabled' : 'neutral',
-        weight: "strong",
+        weight: "semibold",
         children: [label, ' ', secondaryLabel && /*#__PURE__*/jsx(Text, {
           inline: true,
           tone: disabled ? 'disabled' : 'muted',
@@ -194,4 +197,4 @@ function IndicatorContainer(_ref3) {
   }));
 }
 
-export { Field, FieldMessage, useFieldContext, useFieldIds };
+export { Field, FieldContextProvider, FieldMessage, useFieldContext, useFieldIds };

package/package.json

@@ -1,24 +1,30 @@
 {
   "name": "@spark-web/field",
+  "version": "2.0.0",
   "license": "MIT",
-  "version": "1.0.2",
   "main": "dist/spark-web-field.cjs.js",
   "module": "dist/spark-web-field.esm.js",
-  "devDependencies": {
-    "@types/react": "^17.0.12"
-  },
+  "files": [
+    "dist"
+  ],
   "dependencies": {
-    "@babel/runtime": "^7.14.6",
-    "@emotion/css": "^11.7.1",
-    "@spark-web/a11y": "^1.0.2",
-    "@spark-web/box": "^1.0.2",
-    "@spark-web/icon": "^1.0.2",
-    "@spark-web/stack": "^1.0.2",
-    "@spark-web/text": "^1.0.2",
-    "@spark-web/theme": "^2.0.1",
-    "@spark-web/utils": "^1.0.2",
+    "@babel/runtime": "^7.18.0",
+    "@emotion/css": "^11.9.0",
+    "@spark-web/a11y": "^1.0.5",
+    "@spark-web/box": "^1.0.5",
+    "@spark-web/icon": "^1.1.3",
+    "@spark-web/stack": "^1.0.5",
+    "@spark-web/text": "^1.0.5",
+    "@spark-web/theme": "^3.0.1",
+    "@spark-web/utils": "^1.1.3"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.12",
     "react": "^17.0.2"
   },
+  "peerDependencies": {
+    "react": ">=17.0.2"
+  },
   "engines": {
     "node": ">= 14.13"
   }

package/CHANGELOG.md

@@ -1,60 +0,0 @@
-# @spark-web/field
-
-## 1.0.2
-
-### Patch Changes
-
-- [#40](https://github.com/brighte-labs/spark-web/pull/40)
-  [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
-  @babel/transform-runtime
-
-- Updated dependencies
-  [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
-  - @spark-web/a11y@1.0.2
-  - @spark-web/box@1.0.2
-  - @spark-web/icon@1.0.2
-  - @spark-web/stack@1.0.2
-  - @spark-web/text@1.0.2
-  - @spark-web/theme@2.0.1
-  - @spark-web/utils@1.0.2
-
-## 1.0.1
-
-### Patch Changes
-
-- [#36](https://github.com/brighte-labs/spark-web/pull/36)
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
-  Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
-  config
-
-- Updated dependencies
-  [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
-  [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
-  - @spark-web/theme@2.0.0
-  - @spark-web/a11y@1.0.1
-  - @spark-web/box@1.0.1
-  - @spark-web/icon@1.0.1
-  - @spark-web/stack@1.0.1
-  - @spark-web/text@1.0.1
-  - @spark-web/utils@1.0.1
-
-## 1.0.0
-
-### Major Changes
-
-- [#27](https://github.com/brighte-labs/spark-web/pull/27)
-  [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
-  Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
-
-### Patch Changes
-
-- Updated dependencies
-  [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
-  - @spark-web/a11y@1.0.0
-  - @spark-web/box@1.0.0
-  - @spark-web/icon@1.0.0
-  - @spark-web/stack@1.0.0
-  - @spark-web/text@1.0.0
-  - @spark-web/theme@1.0.0
-  - @spark-web/utils@1.0.0

package/src/Field.tsx

@@ -1,214 +0,0 @@
-import { css } from '@emotion/css';
-import { composeId, mergeIds, useId, VisuallyHidden } from '@spark-web/a11y';
-import { Box } from '@spark-web/box';
-import { CheckCircleIcon, ExclamationCircleIcon } from '@spark-web/icon';
-import { Stack } from '@spark-web/stack';
-import { Text } from '@spark-web/text';
-import { useTheme } from '@spark-web/theme';
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import { buildDataAttributes } from '@spark-web/utils/internal';
-import type { ReactElement, ReactNode } from 'react';
-import { forwardRef, Fragment } from 'react';
-
-import { FieldContextProvider } from './context';
-
-export type Tone = keyof typeof messageToneMap;
-
-export type FieldProps = {
-  id?: string;
-  data?: DataAttributeMap;
-
-  /** Optionally provide a utility or contextual hint, related to the field. */
-  adornment?: ReactElement;
-  /** Input component  */
-  children: ReactNode;
-  /**
-   * Indicates that the field is perceivable but disabled, so it is not editable
-   * or otherwise operable.
-   */
-  disabled?: boolean;
-  /** Provide additional information that will aid user input. */
-  description?: string;
-  /** Concisely label the field. */
-  label: string;
-  /**
-   * The label must always be provided for assistive technology, but you may
-   * hide it from sighted users when the intent can be inferred from context.
-   */
-  labelVisibility?: 'hidden' | 'reserve-space' | 'visible';
-  /** Provide a message, informing the user about changes in state. */
-  message?: string;
-  /** Additional context, typically used to indicate that the field is optional. */
-  secondaryLabel?: string;
-  /** Provide a tone to influence elements of the field, and its input. */
-  tone?: Tone;
-};
-
-/**
- * Using a [context](https://reactjs.org/docs/context.html), the field
- * component connects the label, description, and message to the input element.
- */
-export const Field = forwardRef<HTMLDivElement, FieldProps>(
-  (
-    {
-      children,
-      id: idProp,
-      data,
-
-      description,
-      disabled = false,
-      label,
-      adornment,
-      labelVisibility = 'visible',
-      message,
-      secondaryLabel,
-      tone = 'neutral',
-    },
-    forwardedRef
-  ) => {
-    const { descriptionId, inputId, messageId } = useFieldIds(idProp);
-
-    // field context
-    const fieldContext = {
-      'aria-describedby': mergeIds(
-        message && messageId,
-        description && descriptionId
-      ),
-      id: inputId,
-      disabled,
-      invalid: Boolean(message && tone === 'critical'),
-    };
-
-    // label prep
-    const hiddenLabel = (
-      <VisuallyHidden as="label" htmlFor={inputId}>
-        {label} {secondaryLabel}
-      </VisuallyHidden>
-    );
-    const labelElement = {
-      hidden: hiddenLabel,
-      visible: (
-        <Box as="label" htmlFor={inputId}>
-          <Text inline tone={disabled ? 'disabled' : 'neutral'} weight="strong">
-            {label}{' '}
-            {secondaryLabel && (
-              <Text inline tone={disabled ? 'disabled' : 'muted'}>
-                {secondaryLabel}
-              </Text>
-            )}
-          </Text>
-        </Box>
-      ),
-      'reserve-space': (
-        <Fragment>
-          {hiddenLabel}
-          <Text inline aria-hidden>
-            &nbsp;
-          </Text>
-        </Fragment>
-      ),
-    };
-
-    return (
-      <FieldContextProvider value={fieldContext}>
-        <Stack
-          gap={labelVisibility === 'hidden' ? undefined : 'small'}
-          ref={forwardedRef}
-          {...(data ? buildDataAttributes(data) : null)}
-        >
-          <Box
-            display="flex"
-            alignItems="center"
-            justifyContent="spaceBetween"
-            gap="large"
-          >
-            {labelElement[labelVisibility]}
-            {adornment}
-          </Box>
-
-          {description && (
-            <Text tone="muted" size="small" id={descriptionId}>
-              {description}
-            </Text>
-          )}
-
-          {children}
-
-          {message && (
-            <FieldMessage tone={tone} id={messageId} message={message} />
-          )}
-        </Stack>
-      </FieldContextProvider>
-    );
-  }
-);
-Field.displayName = 'Field';
-
-// Utils
-// ------------------------------
-
-export function useFieldIds(id?: string) {
-  const inputId = useId(id);
-  const descriptionId = composeId(inputId, 'description');
-  const messageId = composeId(inputId, 'message');
-
-  return { descriptionId, inputId, messageId };
-}
-
-// Styled components
-// ------------------------------
-
-const messageToneMap = {
-  critical: 'critical',
-  neutral: 'muted',
-  positive: 'positive',
-} as const;
-
-// NOTE: use icons in addition to color for folks with visions issues
-const messageIconMap = {
-  critical: ExclamationCircleIcon,
-  neutral: null,
-  positive: CheckCircleIcon,
-} as const;
-
-type FieldMessageProps = Required<Pick<FieldProps, 'message' | 'id' | 'tone'>>;
-export const FieldMessage = ({ message, id, tone }: FieldMessageProps) => {
-  const textTone = messageToneMap[tone];
-  const Icon = messageIconMap[tone];
-
-  return (
-    <Box display="flex" gap="xsmall">
-      {Icon ? (
-        <IndicatorContainer>
-          <Icon size="xxsmall" tone={tone} />
-        </IndicatorContainer>
-      ) : null}
-      <Text tone={textTone} size="small" id={id}>
-        {message}
-      </Text>
-    </Box>
-  );
-};
-
-function IndicatorContainer({ children, ...props }: { children: ReactNode }) {
-  const { typography, utils } = useTheme();
-  const { mobile, tablet } = typography.text.small;
-  const responsiveStyles = utils.responsiveStyles({
-    mobile: { height: mobile.capHeight },
-    tablet: { height: tablet.capHeight },
-  });
-
-  return (
-    <Box
-      display="flex"
-      alignItems="center"
-      aria-hidden
-      cursor="default"
-      flexShrink={0}
-      className={css(responsiveStyles)}
-      {...props}
-    >
-      {children}
-    </Box>
-  );
-}

package/src/context.ts

@@ -1,24 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type FieldContextType = {
-  'aria-describedby'?: string;
-  id: string;
-  disabled: boolean;
-  invalid: boolean;
-};
-
-export const FieldContext = createContext<FieldContextType | null>(null);
-export const FieldContextProvider = FieldContext.Provider;
-
-export const FIELD_CONTEXT_ERROR_MESSAGE =
-  'Input components must be inside a `Field`.';
-
-export function useFieldContext() {
-  const ctx = useContext(FieldContext);
-
-  if (!ctx) {
-    throw new Error(FIELD_CONTEXT_ERROR_MESSAGE);
-  }
-
-  return ctx;
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-export { useFieldContext } from './context';
-export { Field, FieldMessage, useFieldIds } from './Field';
-
-// types
-
-export type { FieldContextType } from './context';
-export type { FieldProps, Tone } from './Field';