@cloudflare/component-toggle 6.0.0 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 7.0.1
+
+### Patch Changes
+
+- 0214229aa1: Add aria-invalid property, show error color in background
+
+## 7.0.0
+
+### Patch Changes
+
+- Updated dependencies [77059b4a95]
+  - @cloudflare/style-container@7.10.0
+  - @cloudflare/component-icon@9.0.0
+  - @cloudflare/elements@3.0.0
+
 ## 6.0.0
 
 ### Patch Changes

package/dist/Toggle.d.ts

@@ -1,32 +1,57 @@
 import React, { ComponentProps } from 'react';
 declare const ToggleInput: React.ComponentType<{
+    is?: string | undefined;
+    name?: string | undefined;
+    disabled?: boolean | undefined;
+    color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
+    capture?: string | boolean | undefined;
+    children?: React.ReactNode;
     form?: string | undefined;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
     pattern?: string | undefined;
-    children?: React.ReactNode;
-    type?: string | undefined;
-    id?: string | undefined;
-    key?: React.Key | null | undefined;
-    onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
-    onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
-    onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
-    onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
-    onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
+    value?: string | number | readonly string[] | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string;
+    } | undefined;
+    accessKey?: string | undefined;
     className?: string | undefined;
-    color?: (string & (string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined])) | undefined;
-    height: (string | number | undefined) & (import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined) & number;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: (boolean | "true" | "false") | undefined;
+    id?: string | undefined;
     lang?: string | undefined;
-    max?: string | number | undefined;
-    min?: string | number | undefined;
-    name?: string | undefined;
-    width?: ((string | number) & (import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined])) | undefined;
-    role?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
-    crossOrigin?: string | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    radioGroup?: string | undefined;
+    role?: string | undefined;
+    about?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    resource?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: boolean | "true" | "false" | undefined;
     'aria-autocomplete'?: "none" | "list" | "both" | "inline" | undefined;
@@ -45,7 +70,7 @@ declare const ToggleInput: React.ComponentType<{
     'aria-expanded'?: boolean | "true" | "false" | undefined;
     'aria-flowto'?: string | undefined;
     'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    'aria-haspopup'?: boolean | "menu" | "dialog" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
     'aria-hidden'?: boolean | "true" | "false" | undefined;
     'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     'aria-keyshortcuts'?: string | undefined;
@@ -75,9 +100,34 @@ declare const ToggleInput: React.ComponentType<{
     'aria-valuemin'?: number | undefined;
     'aria-valuenow'?: number | undefined;
     'aria-valuetext'?: string | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string;
-    } | undefined;
+    type?: string | undefined;
+    alt?: string | undefined;
+    crossOrigin?: string | undefined;
+    src?: string | undefined;
+    autoFocus?: boolean | undefined;
+    formAction?: string | undefined;
+    formEncType?: string | undefined;
+    formMethod?: string | undefined;
+    formNoValidate?: boolean | undefined;
+    formTarget?: string | undefined;
+    height: (string | number | undefined) & (import("csstype").HeightProperty<string | number> | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | [import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined, import("csstype").HeightProperty<string | number> | undefined] | undefined) & number;
+    width?: ((string | number) & (import("csstype").WidthProperty<string | number> | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined] | [import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined, import("csstype").WidthProperty<string | number> | undefined])) | undefined;
+    autoComplete?: string | undefined;
+    accept?: string | undefined;
+    checked?: boolean | undefined;
+    list?: string | undefined;
+    max?: string | number | undefined;
+    maxLength?: number | undefined;
+    min?: string | number | undefined;
+    minLength?: number | undefined;
+    multiple?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    required?: boolean | undefined;
+    size?: number | undefined;
+    step?: string | number | undefined;
+    key?: React.Key | null | undefined;
+    hidden?: boolean | undefined;
+    translate?: "yes" | "no" | undefined;
     onCopy?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
     onCopyCapture?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
     onCut?: React.ClipboardEventHandler<HTMLInputElement> | undefined;
@@ -162,12 +212,15 @@ declare const ToggleInput: React.ComponentType<{
     onWaitingCapture?: React.ReactEventHandler<HTMLInputElement> | undefined;
     onAuxClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onAuxClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onContextMenu?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onContextMenuCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onDoubleClick?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onDoubleClickCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onDrag?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragEnd?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragEndCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragEnter?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragEnterCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
@@ -177,11 +230,14 @@ declare const ToggleInput: React.ComponentType<{
     onDragLeaveCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragOver?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragOverCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
+    onDragStart?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDragStartCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDrop?: React.DragEventHandler<HTMLInputElement> | undefined;
     onDropCapture?: React.DragEventHandler<HTMLInputElement> | undefined;
     onMouseDown?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onMouseDownCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseEnter?: React.MouseEventHandler<HTMLInputElement> | undefined;
+    onMouseLeave?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onMouseMove?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onMouseMoveCapture?: React.MouseEventHandler<HTMLInputElement> | undefined;
     onMouseOut?: React.MouseEventHandler<HTMLInputElement> | undefined;
@@ -232,69 +288,13 @@ declare const ToggleInput: React.ComponentType<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLInputElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLInputElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLInputElement> | undefined;
-    dir?: string | undefined;
-    is?: string | undefined;
-    disabled?: boolean | undefined;
-    value?: string | number | readonly string[] | undefined;
-    defaultChecked?: boolean | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined;
-    suppressHydrationWarning?: boolean | undefined;
-    accessKey?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
-    contextMenu?: string | undefined;
-    placeholder?: string | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
-    radioGroup?: string | undefined;
-    about?: string | undefined;
-    datatype?: string | undefined;
-    inlist?: any;
-    prefix?: string | undefined;
-    property?: string | undefined;
-    resource?: string | undefined;
-    typeof?: string | undefined;
-    vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
-    autoCorrect?: string | undefined;
-    autoSave?: string | undefined;
-    itemProp?: string | undefined;
-    itemScope?: boolean | undefined;
-    itemType?: string | undefined;
-    itemID?: string | undefined;
-    itemRef?: string | undefined;
-    results?: number | undefined;
-    security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    alt?: string | undefined;
-    src?: string | undefined;
-    autoFocus?: boolean | undefined;
-    formAction?: string | undefined;
-    formEncType?: string | undefined;
-    formMethod?: string | undefined;
-    formNoValidate?: boolean | undefined;
-    formTarget?: string | undefined;
-    autoComplete?: string | undefined;
-    accept?: string | undefined;
-    capture?: string | boolean | undefined;
-    checked?: boolean | undefined;
-    list?: string | undefined;
-    maxLength?: number | undefined;
-    minLength?: number | undefined;
-    multiple?: boolean | undefined;
-    readOnly?: boolean | undefined;
-    required?: boolean | undefined;
-    size?: number | undefined;
-    step?: string | number | undefined;
-    hidden?: boolean | undefined;
-    translate?: "no" | "yes" | undefined;
+    borderColor?: ((string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined]) & string) | undefined;
     p?: import("csstype").PaddingProperty<string | number> | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | [import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined, import("csstype").PaddingProperty<string | number> | undefined] | undefined;
     cursor?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     display?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
     fontSize?: import("csstype").FontSizeProperty<string | number> | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | [import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined, import("csstype").FontSizeProperty<string | number> | undefined] | undefined;
     fontWeight?: import("csstype").FontWeightProperty | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | [import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined, import("csstype").FontWeightProperty | undefined] | undefined;
     textDecoration?: string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined] | undefined;
-    borderColor?: ((string | [string | undefined, string | undefined] | [string | undefined, string | undefined, string | undefined]) & string) | undefined;
     margin?: import("csstype").MarginProperty<string | number> | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | [import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined, import("csstype").MarginProperty<string | number> | undefined] | undefined;
     marginLeft?: import("csstype").MarginLeftProperty<string | number> | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | [import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined, import("csstype").MarginLeftProperty<string | number> | undefined] | undefined;
     marginRight?: import("csstype").MarginRightProperty<string | number> | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | [import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined, import("csstype").MarginRightProperty<string | number> | undefined] | undefined;
@@ -353,9 +353,16 @@ declare const ToggleInput: React.ComponentType<{
     flexDirection?: import("csstype").FlexDirectionProperty | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | [import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined, import("csstype").FlexDirectionProperty | undefined] | undefined;
     flexBasis?: import("csstype").FlexBasisProperty<string | number> | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | [import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined, import("csstype").FlexBasisProperty<string | number> | undefined] | undefined;
     flexGrow?: import("csstype").GlobalsNumber | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | [import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined, import("csstype").GlobalsNumber | undefined] | undefined;
+    gridTemplateColumns?: import("csstype").GridTemplateColumnsProperty<string | number> | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | [import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined, import("csstype").GridTemplateColumnsProperty<string | number> | undefined] | undefined;
     controlSize: number;
     invalid?: boolean | undefined;
     innerRef?: React.Ref<HTMLInputElement> | undefined;
+    gridColumnSpan?: number | number[] | "end" | "all" | undefined;
+    gridColumnPad?: number | number[] | undefined;
+    gridRowSpan?: number | number[] | undefined;
+    gridRowPad?: number | number[] | undefined;
+    gridAlign?: ("start" | "end" | "center" | "stretch") | undefined;
+    gridJustify?: ("start" | "end" | "center" | "stretch") | undefined;
 }>;
 declare type ToggleProps = Omit<ComponentProps<typeof ToggleInput>, 'value' | 'type' | 'checked' | 'onChange' | 'height' | 'controlSize'> & {
     value?: boolean;

package/es/Toggle.js

@@ -55,7 +55,7 @@ var ToggleInput = createStyledComponent(_ref => {
       bottom: 0,
       left: 0,
       color: theme.colors.white,
-      backgroundColor: theme.colors.gray[4],
+      backgroundColor: invalid ? theme.colors.red[3] : theme.colors.gray[4],
       backgroundImage: backgroundImage(isDarkMode()),
       backgroundPosition: "".concat(height * 0.1, "px 0, ").concat(height * 0.9, "px 0"),
       backgroundRepeat: 'no-repeat',
@@ -82,8 +82,8 @@ var ToggleInput = createStyledComponent(_ref => {
       boxShadow: 'none'
     },
     '&:checked:before': {
-      backgroundColor: color !== null && color !== void 0 ? color : theme.colors.green[5],
-      borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.green[2]
+      backgroundColor: invalid ? theme.colors.error : color !== null && color !== void 0 ? color : theme.colors.green[5],
+      borderColor: invalid ? theme.colors.red[2] : borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.green[2]
     }
   });
 }, 'input');
@@ -118,7 +118,8 @@ var Toggle = _ref2 => {
     onChange: disabled || !onChange ? undefined : e => onChange(e.target.checked),
     "data-testid": testId,
     "aria-labelledby": labelledBy,
-    "aria-describedby": describedBy
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid || undefined
   }));
 };
 

package/lib/Toggle.js

@@ -70,7 +70,7 @@ var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
       bottom: 0,
       left: 0,
       color: theme.colors.white,
-      backgroundColor: theme.colors.gray[4],
+      backgroundColor: invalid ? theme.colors.red[3] : theme.colors.gray[4],
       backgroundImage: backgroundImage((0, _styleConst.isDarkMode)()),
       backgroundPosition: "".concat(height * 0.1, "px 0, ").concat(height * 0.9, "px 0"),
       backgroundRepeat: 'no-repeat',
@@ -97,8 +97,8 @@ var ToggleInput = (0, _styleContainer.createStyledComponent)(function (_ref) {
       boxShadow: 'none'
     },
     '&:checked:before': {
-      backgroundColor: color !== null && color !== void 0 ? color : theme.colors.green[5],
-      borderColor: borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.green[2]
+      backgroundColor: invalid ? theme.colors.error : color !== null && color !== void 0 ? color : theme.colors.green[5],
+      borderColor: invalid ? theme.colors.red[2] : borderColor !== null && borderColor !== void 0 ? borderColor : theme.colors.green[2]
     }
   });
 }, 'input');
@@ -134,7 +134,8 @@ var Toggle = function Toggle(_ref2) {
     },
     "data-testid": testId,
     "aria-labelledby": labelledBy,
-    "aria-describedby": describedBy
+    "aria-describedby": describedBy,
+    "aria-invalid": invalid || undefined
   }));
 };
 

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@cloudflare/component-toggle",
   "description": "Cloudflare Toggle Component",
-  "version": "6.0.0",
-  "types": "./dist/index.d.ts",
+  "version": "7.0.1",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",
@@ -10,18 +9,19 @@
   "publishConfig": {
     "access": "public",
     "main": "lib/index.js",
-    "module": "es/index.js"
+    "module": "es/index.js",
+    "types": "./dist/index.d.ts"
   },
   "dependencies": {
-    "@cloudflare/component-icon": "^8.0.0",
-    "@cloudflare/elements": "^2.0.0",
+    "@cloudflare/component-icon": "^9.0.0",
+    "@cloudflare/elements": "^3.0.0",
     "@cloudflare/intl-react": "^1.9.80",
     "@cloudflare/types": "^6.15.15",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {
     "@cloudflare/style-const": "^5.3.9",
-    "@cloudflare/style-container": "^7.9.0",
+    "@cloudflare/style-container": "^7.10.0",
     "react": "^15.0.0-0 || ^16.0.0-0 || ^17.0.0-0"
   },
   "stratus": {
@@ -34,5 +34,6 @@
     "test": "stratus test",
     "test-coverage": "stratus test --coverage",
     "test-watch": "stratus test --watch"
-  }
+  },
+  "types": "./dist/index.d.ts"
 }