playbook_ui 16.7.0.pre.alpha.PLAY2868datadefaultvalues16188 → 16.7.0.pre.alpha.PLAY2868datadefaultvalues16201

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f16a23dea24d580824a0c4f9ca7399a175fb3972fae96d2247e49151833e58aa
-  data.tar.gz: 0dd89e462977820780f2820ed0686ae053595de8e8674eb2ea065387a2af139e
+  metadata.gz: e8c942a94d890b530f5708a65f5fc6472d55b0b716f6ae45c236431d2750075d
+  data.tar.gz: 479a54d947ce814bd8e939e63f73852edbd50f00130add31cb58391fcb2479b1
 SHA512:
-  metadata.gz: 1cfccb366f651de1b3756fb8d14d8ffb5f996154dd4ef48c3f5312613fdb12aedf98ec818570d9f83af89493cfa819d571a785cbd9a91c4b7b413fa7cf13da29
-  data.tar.gz: 475d2a95c4151dea1453513b4d0eab7ee658ee78986974eac25a7fb86a9e604820265d951a7eefcdd962aa7d96a3f0f5c158a2eaca07a7572d93896fc9b74d75
+  metadata.gz: 597698fe69a18cb562969c3210cc2bec6c6453d81eb2e80609a08c3faef3ab58b8c6671f4544c8fbfe4689b405615ad55ce5dc5c350cda708a2ffcc25de062df
+  data.tar.gz: 45c0cf03a2219898bab6cc3776bb220df91532eb03f8f78db98f7bb943f6824c89a5c430e6a4d9873b6962b3145ada1b79fe42d126b4e2bfe9f919a4f8be0041

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -30,6 +30,20 @@ function serializeDropdownFilterResetDefault(
     const optionList: GenericObject[] = Array.isArray(dropdownOptions)
         ? dropdownOptions
         : [];
+    const optionDefaultId = (option: GenericObject | undefined): string | undefined => {
+        if (!option) return undefined;
+
+        const id = option.id;
+        if (id != null && id !== "") return String(id);
+
+        const matched = optionList.find((listOption: GenericObject) => (
+            (option.value != null && listOption.value === option.value) ||
+            (option.label != null && listOption.label === option.label)
+        ));
+
+        if (matched?.id != null && matched.id !== "") return String(matched.id);
+        return undefined;
+    };
 
     if (variant === "quickpick") {
         if (typeof defaultValue === "string" && defaultValue) {
@@ -48,13 +62,13 @@ function serializeDropdownFilterResetDefault(
                 : [];
         if (!arr.length) return undefined;
         const ids = arr
-            .map((v) => (v as GenericObject)?.id)
+            .map((v) => optionDefaultId(v as GenericObject))
             .filter((id) => id != null && id !== "");
         return ids.length ? ids.join(",") : undefined;
     }
     if (defaultValue && typeof defaultValue === "object" && !Array.isArray(defaultValue)) {
-        const id = (defaultValue as GenericObject).id;
-        if (id != null && id !== "") return String(id);
+        const id = optionDefaultId(defaultValue as GenericObject);
+        if (id) return id;
     }
     return undefined;
 }

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -434,7 +434,10 @@ test("defaultValue works with multiSelect", () => {
     render(
       <Dropdown
           data={{ testid: testId }}
-          defaultValue={[options[0], options[2]]}
+          defaultValue={[
+            { label: options[0].label, value: options[0].value },
+            { label: options[2].label, value: options[2].value },
+          ]}
           multiSelect
           options={options}
       />

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

@@ -100,15 +100,6 @@ const Select = ({
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectId = (inputOptions?.id as string) || name
 
-  const filterResetDefaultValue = (() => {
-    if (value === undefined || value === null || value === '') return undefined
-    if (Array.isArray(value)) {
-      const joined = value.filter((v) => v !== '' && v != null).join(',')
-      return joined || undefined
-    }
-    return String(value)
-  })()
-
   const selectBody =(() =>{
     if (children) return children
     return (
@@ -117,7 +108,6 @@ const Select = ({
           {...domSafeProps(props)}
           {...inputOptions}
           disabled={disabled}
-          {...(filterResetDefaultValue !== undefined ? { 'data-default-value': filterResetDefaultValue } : {})}
           id={selectId}
           multiple={multiple}
           name={name}

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -88,36 +88,4 @@ test('inputOptions are passed to select element', () => {
   expect(selectElement).toHaveAttribute('id', 'custom-select-id')
   expect(selectElement).toHaveClass('custom-select-class')
   expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
-})
-
-test('exposes data-default-value on select when value is set', () => {
-  render(
-    <Select
-        data={{ testid: testId }}
-        label="Favorite Food"
-        name="food"
-        onChange={() => {}}
-        options={options}
-        value="2"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  const selectElement = kit.querySelector('select')
-  expect(selectElement).toHaveAttribute('data-default-value', '2')
-})
-
-test('omits data-default-value when value is empty', () => {
-  render(
-    <Select
-        data={{ testid: testId }}
-        label="Favorite Food"
-        name="food"
-        onChange={() => {}}
-        options={options}
-        value=""
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  const selectElement = kit.querySelector('select')
-  expect(selectElement).not.toHaveAttribute('data-default-value')
-})
+});

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -182,9 +182,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
   // Filter out emojiMask from props passed to DOM element
   const { emojiMask: _emojiMask, ...domProps } = props
 
-  const filterResetDefaultValue =
-    value !== '' && value !== undefined && value !== null ? String(value) : undefined
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -194,7 +191,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
-        {...(filterResetDefaultValue !== undefined ? { 'data-default-value': filterResetDefaultValue } : {})}
         id={id}
         key={id}
         name={name}

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -413,35 +413,3 @@ test('allows accented characters when emojiMask is enabled', () => {
   fireEvent.change(input, { target: { value: 'àëǒüñ' } })
   expect(input.value).toBe('àëǒüñ')
 })
-
-test('exposes data-default-value on the input when value is set', () => {
-  render(
-    <TextInput
-        data={{ testid: testId }}
-        label="City"
-        name="city"
-        onChange={() => {}}
-        placeholder="City"
-        value="Philadelphia"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  const input = within(kit).getByRole('textbox')
-  expect(input).toHaveAttribute('data-default-value', 'Philadelphia')
-})
-
-test('omits data-default-value when value is empty', () => {
-  render(
-    <TextInput
-        data={{ testid: testId }}
-        label="City"
-        name="city"
-        onChange={() => {}}
-        placeholder="City"
-        value=""
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  const input = within(kit).getByRole('textbox')
-  expect(input).not.toHaveAttribute('data-default-value')
-})