playbook_ui 14.9.0.pre.alpha.PBNTR686advancedtablepaginationpoc4747 → 14.9.0.pre.alpha.PLAY16264818

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b4ff9738d72ef7d8d82f6094b14f24ee0bbca5527331350fd798e027ef0b5e2
-  data.tar.gz: b00dba97003a486b78e3077c6bd401daa16ca6def0facb9402c4cc5d6aa3fe04
+  metadata.gz: fd75b9e4b0f7ce117dbd06fd2a726c2c365b6e5bf64cb203f030ba83659ae448
+  data.tar.gz: 4973b4425fac4133d09a37743f38638af91d63ac3a720555846ca286b0358635
 SHA512:
-  metadata.gz: 323900e7b5f600c456c7ad6ecc392618710e7edd86e3d4e3db36bc02c5300b9e969e63be408342ece5a706d5ae7999a3dbbf351afacc3f9e40fb476188a0071c
-  data.tar.gz: f7aadfa3e07c508f56584578cf74bf01c98f127fd411900118ffe91e66aba0a88dea4e09beb9e4ea34d10f709580500dd9bab32bc92b77ea07ed42dcc658dc51
+  metadata.gz: cdd757f0e267dede1c878c35a04a53cc26fb39568a802ae979477d938c6fc3e23f4e48150ec4d549717febb1daf69ae8d60285582c1ef58cd539b819ac47ab08
+  data.tar.gz: 9a2776ad808a0e04c2f152e64975d48b02911c3edd4cda0be6d317571fd92553d29cd6e8159444d392d2a48815e4ee1318b4eaabaf5c17bdba9c9c89ff22538b

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -1,8 +1,10 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
+import { FieldValues } from 'react-hook-form'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
+import { HookFormProps, withHookForm } from '../utilities/hookFormProps'
 import type { InputCallback } from '../types'
 import { getAllIcons } from "../utilities/icons/allicons"
 
@@ -16,7 +18,7 @@ type SelectOption = {
   disabled?: boolean,
 }
 
-type SelectProps = {
+type SelectProps<T extends FieldValues = FieldValues> = {
   aria?: { [key: string]: string },
   blankSelection?: string,
   children?: Node,
@@ -30,16 +32,17 @@ type SelectProps = {
   includeBlank?: string,
   inline?: boolean,
   label?: string,
-  margin: string,
+  margin?: string,
   marginBottom: string,
+  marginTop: string,
   multiple?: boolean,
   name?: string,
-  onChange: InputCallback<HTMLSelectElement>,
+  onChange?: InputCallback<HTMLSelectElement>,
   options: SelectOption[],
   required?: boolean,
   showArrow?: boolean,
   value?: string,
-} & GlobalProps
+} & GlobalProps & Partial<HookFormProps<T>>
 
 const createOptions = (options: SelectOption[]) => options.map((option, index) => (
   <option
@@ -51,7 +54,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
   </option>
 ))
 
-const Select = ({
+const Select = <T extends FieldValues = FieldValues>({
   aria = {},
   blankSelection,
   children,
@@ -65,17 +68,20 @@ const Select = ({
   inline = false,
   multiple = false,
   name,
-  onChange = () => undefined,
+  onChange,
   options = [],
+  register,
   required = false,
+  rules,
   showArrow = false,
   value,
   ...props
-}: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
+}: SelectProps<T>, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const optionsList = createOptions(options)
+  const hookFormProps = name ? withHookForm({ register, name, rules }) : {}
 
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
@@ -91,21 +97,22 @@ const Select = ({
     compactClass
   );
 
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
+  const icons = getAllIcons()
+  const angleDown = icons?.angleDown?.icon as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
-          {...htmlOptions}
           {...domSafeProps(props)}
+          {...hookFormProps}
           disabled={disabled}
           id={name}
           multiple={multiple}
           name={name}
-          onChange={onChange}
-          ref={ref}
+          onChange={onChange || hookFormProps.onChange}
+          ref={ref || hookFormProps.ref}
           required={required}
           value={value}
       >
@@ -135,14 +142,12 @@ const Select = ({
           htmlFor={name}
       >
         {selectBody}
-        { multiple !== true ?
+        { multiple !== true && angleDown &&
           <Icon
               className="pb_select_kit_caret svg-inline--fa"
               customIcon={angleDown}
               fixedWidth
           />
-          :
-          null
         }
         {error &&
           <Body

data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { useForm } from 'react-hook-form'
+import { Select, Card, Body, Button } from 'playbook-ui'
+
+const SelectForm = (props) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm({
+    defaultValues: {
+      favoriteFood: '',
+      mealType: '',
+      dietaryRestrictions: '',
+    }
+  })
+
+  const onSubmit = (data) => {
+    console.log('Form submitted:', data)
+  }
+
+  // Watch form values for real-time display
+  const formValues = watch()
+
+  const foodOptions = [
+    { value: 'pizza', text: 'Pizza' },
+    { value: 'burger', text: 'Burger' },
+    { value: 'sushi', text: 'Sushi' },
+    { value: 'salad', text: 'Salad' },
+  ]
+
+  const mealTypes = [
+    { value: 'breakfast', text: 'Breakfast' },
+    { value: 'lunch', text: 'Lunch' },
+    { value: 'dinner', text: 'Dinner' },
+  ]
+
+  const dietaryOptions = [
+    { value: 'none', text: 'No Restrictions' },
+    { value: 'vegetarian', text: 'Vegetarian' },
+    { value: 'vegan', text: 'Vegan' },
+    { value: 'glutenFree', text: 'Gluten Free' },
+  ]
+
+  return (
+    <div>
+      <Card>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Select
+              error={errors.favoriteFood?.message}
+              label="What's your favorite food?"
+              name="favoriteFood"
+              options={foodOptions}
+              register={register}
+              rules={{
+                required: 'Please select your favorite food',
+              }}
+              {...props}
+          />
+          <Select
+              blankSelection="Choose a meal type..."
+              error={errors.mealType?.message}
+              label="Preferred meal time"
+              marginTop="md"
+              name="mealType"
+              options={mealTypes}
+              register={register}
+              rules={{
+                required: 'Please select a meal type',
+              }}
+              {...props}
+          />
+          <Select
+              label="Dietary Restrictions"
+              marginTop="md"
+              name="dietaryRestrictions"
+              options={dietaryOptions}
+              register={register}
+              {...props}
+          />
+
+          <Button
+              marginTop="lg"
+              text="Submit"
+              type="submit"
+              variant="primary"
+              
+          />
+        </form>
+        <Card marginTop="lg">
+          <Body
+              text="Current Form Values:"
+              variant="bold"
+          />
+          <pre style={{ marginTop: '8px', color: "white" }}>
+            {JSON.stringify(formValues, null, 2)}
+          </pre>
+        </Card>
+      </Card>
+    </div>
+  )
+}
+
+export default SelectForm
+
+
+

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -30,6 +30,7 @@ examples:
   - select_inline_show_arrow: Select Inline (Always Show Arrow)
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
+  - select_form: Form
 
   swift:
   - select_default_swift: Default

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -10,3 +10,4 @@ export { default as SelectInline } from './_select_inline.jsx'
 export { default as SelectInlineShowArrow } from './_select_inline_show_arrow.jsx'
 export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
+export { default as SelectForm } from './_select_form.jsx'

data/app/pb_kits/playbook/utilities/hookFormProps.ts

@@ -0,0 +1,16 @@
+import { UseFormRegister, FieldValues, RegisterOptions } from 'react-hook-form'
+
+export type HookFormProps<T extends FieldValues = FieldValues> = {
+  register?: UseFormRegister<T>
+  rules?: RegisterOptions
+  name: string
+}
+
+export const withHookForm = <T extends FieldValues = FieldValues>(
+  props: HookFormProps<T>
+) => {
+  const { register, name, rules } = props
+  if (!register) return {}
+  
+  return register(name, rules) 
+}