@charcoal-ui/react 4.0.0-beta.6 → 4.0.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.0-beta.6",
+  "version": "4.0.0-beta.7",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -28,7 +28,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.6",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.7",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
     "@storybook/react": "^8.0.5",
@@ -57,11 +57,11 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.0.0-beta.6",
-    "@charcoal-ui/icons": "^4.0.0-beta.6",
-    "@charcoal-ui/styled": "^4.0.0-beta.6",
-    "@charcoal-ui/theme": "^4.0.0-beta.6",
-    "@charcoal-ui/utils": "^4.0.0-beta.6",
+    "@charcoal-ui/foundation": "^4.0.0-beta.7",
+    "@charcoal-ui/icons": "^4.0.0-beta.7",
+    "@charcoal-ui/styled": "^4.0.0-beta.7",
+    "@charcoal-ui/theme": "^4.0.0-beta.7",
+    "@charcoal-ui/utils": "^4.0.0-beta.7",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -94,5 +94,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "0257ebd0246caa24f928a58887cb439b79c4f246"
+  "gitHead": "917b92762540e43b08b295b3fecccd47862d67e3"
 }

package/src/_lib/createDivComponent.tsx

@@ -0,0 +1,11 @@
+import { forwardRef } from 'react'
+import { useClassNames } from './useClassNames'
+
+export function createDivComponent(mainClassName: string) {
+  return forwardRef<HTMLDivElement, React.ComponentPropsWithRef<'div'>>(
+    function DivComponent({ className, ...props }, ref) {
+      const classNames = useClassNames(mainClassName, className)
+      return <div className={classNames} ref={ref} {...props} />
+    }
+  )
+}

package/src/components/DropdownSelector/__snapshots__/index.story.storyshot

@@ -1,13 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  margin: 0;
-  color: var(--charcoal-text2);
-}
-
 .c0 {
   display: grid;
   grid-template-columns: 1fr;
@@ -159,11 +152,12 @@ exports[`Storybook Tests react/DropdownSelector AssistiveText 1`] = `
           name="16/Menu"
         />
       </button>
-      <p
-        className="c4"
+      <div
+        className="charcoal-text-field-assistive-text"
+        data-invalid={false}
       >
         assistiveText
-      </p>
+      </div>
     </div>
   </div>
 </div>
@@ -1173,13 +1167,6 @@ exports[`Storybook Tests react/DropdownSelector Invalid 1`] = `
 `;
 
 exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
-.c4 {
-  font-size: 14px;
-  line-height: 22px;
-  margin: 0;
-  color: var(--charcoal-assertive);
-}
-
 .c0 {
   display: grid;
   grid-template-columns: 1fr;
@@ -1336,11 +1323,12 @@ exports[`Storybook Tests react/DropdownSelector InvalidAssistiveText 1`] = `
           name="16/Menu"
         />
       </button>
-      <p
-        className="c4"
+      <div
+        className="charcoal-text-field-assistive-text"
+        data-invalid={true}
       >
         assistiveText
-      </p>
+      </div>
     </div>
   </div>
 </div>

package/src/components/DropdownSelector/index.tsx

@@ -9,7 +9,7 @@ import MenuList, { MenuListChildren } from './MenuList'
 import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 import { getValuesRecursive } from './MenuList/internals/getValuesRecursive'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
-import { AssistiveText } from '../TextField'
+import { AssistiveText } from '../TextField/AssistiveText'
 
 export type DropdownSelectorProps = {
   label: string
@@ -121,7 +121,7 @@ export default function DropdownSelector({
         </DropdownPopover>
       )}
       {props.assistiveText !== undefined && (
-        <AssistiveText invalid={props.invalid === true}>
+        <AssistiveText data-invalid={props.invalid === true}>
           {props.assistiveText}
         </AssistiveText>
       )}

package/src/components/Modal/ModalPlumbing.tsx

@@ -1,8 +1,8 @@
 import { ModalContext } from '.'
-import { forwardRef, useContext } from 'react'
-import { useClassNames } from '../../_lib/useClassNames'
+import { useContext } from 'react'
 
 import './ModalPlumbing.css'
+import { createDivComponent } from '../../_lib/createDivComponent'
 
 export function ModalHeader() {
   const modalCtx = useContext(ModalContext)
@@ -21,12 +21,3 @@ export const ModalAlign = createDivComponent('charcoal-modal-align')
 export const ModalBody = createDivComponent('charcoal-modal-body')
 
 export const ModalButtons = createDivComponent('charcoal-modal-buttons')
-
-function createDivComponent(mainClassName: string) {
-  return forwardRef<HTMLDivElement, React.ComponentPropsWithRef<'div'>>(
-    function DivComponent({ className, ...props }, ref) {
-      const classNames = useClassNames(mainClassName, className)
-      return <div className={classNames} ref={ref} {...props} />
-    }
-  )
-}