@patternfly/react-templates 6.0.0-alpha.4 → 6.0.0-alpha.41

package/src/components/Select/examples/SelectTemplates.md

@@ -4,25 +4,32 @@ section: components
 subsection: menus
 template: true
 beta: true
-propComponents: ['SelectSimple', 'CheckboxSelect']
+propComponents: ['SimpleSelect', 'CheckboxSelect', 'TypeaheadSelect']
 ---
 
 Note: Templates live in their own package at [@patternfly/react-templates](https://www.npmjs.com/package/@patternfly/react-templates)!
 
 For custom use cases, please see the select component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
-import { SelectOption, Checkbox } from '@patternfly/react-core';
-import { SelectSimple, CheckboxSelect } from '@patternfly/react-templates';
+import { Checkbox } from '@patternfly/react-core';
+import { SimpleSelect, CheckboxSelect, TypeaheadSelect } from '@patternfly/react-templates';
 
 ## Select template examples
 
 ### Simple
 
-```ts file="SelectSimpleDemo.tsx"
+```ts file="SimpleSelectDemo.tsx"
 
 ```
 
 ### Checkbox
 
 ```ts file="CheckboxSelectDemo.tsx"
+
+```
+
+### Typeahead
+
+```ts file="TypeaheadSelectDemo.tsx"
+
 ```

package/src/components/Select/examples/{SelectSimpleDemo.tsx → SimpleSelectDemo.tsx}

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Checkbox } from '@patternfly/react-core';
-import { SelectSimple, SelectSimpleOption } from '@patternfly/react-templates';
+import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 
 export const SelectSimpleDemo: React.FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
 
-  const initialOptions: SelectSimpleOption[] = [
-    { content: 'Option 1', value: 'option1' },
-    { content: 'Option 2', value: 'option2' },
-    { content: 'Option 3', value: 'option3' }
+  const initialOptions: SimpleSelectOption[] = [
+    { content: 'Option 1', value: 'Option 1' },
+    { content: 'Option 2', value: 'Option 2', description: 'Option with description' },
+    { content: 'Option 3', value: 'Option 3' }
   ];
 
   return (
@@ -20,7 +20,7 @@ export const SelectSimpleDemo: React.FunctionComponent = () => {
         onChange={(_event, checked) => setIsDisabled(checked)}
         style={{ marginBottom: 20 }}
       />
-      <SelectSimple initialOptions={initialOptions} isDisabled={isDisabled} />
+      <SimpleSelect initialOptions={initialOptions} isDisabled={isDisabled} />
     </React.Fragment>
   );
 };

package/src/components/Select/examples/TypeaheadSelectDemo.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
+
+export const SelectTypeaheadDemo: React.FunctionComponent = () => {
+  const initialOptions: TypeaheadSelectOption[] = [
+    { content: 'Alabama', value: 'option1' },
+    { content: 'Florida', value: 'option2' },
+    { content: 'New Jersey', value: 'option3' },
+    { content: 'New Mexico', value: 'option4' },
+    { content: 'New York', value: 'option5' },
+    { content: 'North Carolina', value: 'option6' }
+  ];
+
+  return (
+    <TypeaheadSelect
+      initialOptions={initialOptions}
+      placeholder="Select a state"
+      noOptionsFoundMessage={(filter) => `No state was found for "${filter}"`}
+    />
+  );
+};

package/src/components/Select/index.ts

@@ -1,2 +1,3 @@
-export * from './SelectSimple';
+export * from './SimpleSelect';
 export * from './CheckboxSelect';
+export * from './TypeaheadSelect';

package/src/components/index.ts

@@ -1 +1,2 @@
+export * from './Dropdown';
 export * from './Select';

package/dist/esm/components/Select/SelectSimple.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectSimple.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectSimple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoC,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AAGxH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IAC5E,oCAAoC;IACpC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kCAAkC;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACtC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC/F,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAqED,eAAO,MAAM,YAAY,+EAEvB,CAAC"}

package/dist/esm/components/Select/SelectSimple.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectSimple.js","sourceRoot":"","sources":["../../../../src/components/Select/SelectSimple.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,YAAY,EAAqB,MAAM,mDAAmD,CAAC;AACxH,OAAO,EAAE,UAAU,EAAqB,MAAM,uDAAuD,CAAC;AA0BtG,MAAM,gBAAgB,GAA+C,CAAC,EASlD,EAAE,EAAE;QAT8C,EACpE,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,GAAG,OAAO,OAEH,EADf,KAAK,cAR4D,oGASrE,CADS;IAER,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAS,gBAAgB,CAAC,CAAC;IAEzE,MAAM,mBAAmB,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACzD,MAAM,EAAE,OAAO,EAAE,KAAK,KAAe,MAAM,EAAhB,KAAK,UAAK,MAAM,EAArC,oBAA4B,CAAS,CAAC;QAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;QACjD,OAAO,CACL,oBAAC,YAAY,oBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,KACtE,OAAO,CACK,CAChB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,QAAQ,IAAI,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;QAC9B,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,MAAyD,EAAE,KAAkC,EAAE,EAAE;QAClH,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACpC,WAAW,CAAC,KAAe,CAAC,CAAC;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,SAAuC,EAAE,EAAE,CAAC,CAC1D,oBAAC,UAAU,IACT,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EACH;YACE,KAAK,EAAE,WAAW;SACI,IAGzB,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAC9B,CACd,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,kBACL,EAAE,EAAC,eAAe,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,SAAS,EACnB,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAC3C,MAAM,EAAE,MAAM,EACd,yBAAyB,QACzB,GAAG,EAAE,QAAQ,IACT,KAAK;QAET,oBAAC,UAAU,QAAE,mBAAmB,CAAc,CACvC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,KAAwB,EAAE,GAAmB,EAAE,EAAE,CAAC,CAC9F,oBAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,GAAG,IAAI,CAC/C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/js/components/Select/SelectSimple.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectSimple.d.ts","sourceRoot":"","sources":["../../../../src/components/Select/SelectSimple.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAoC,iBAAiB,EAAE,MAAM,mDAAmD,CAAC;AAGxH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IAC5E,oCAAoC;IACpC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kCAAkC;IAClC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACtC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC/F,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,qDAAqD;IACrD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAqED,eAAO,MAAM,YAAY,+EAEvB,CAAC"}

package/dist/js/components/Select/SelectSimple.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SelectSimple.js","sourceRoot":"","sources":["../../../../src/components/Select/SelectSimple.tsx"],"names":[],"mappings":";;;;AAAA,0DAA0B;AAC1B,6EAAwH;AACxH,qFAAsG;AA0BtG,MAAM,gBAAgB,GAA+C,CAAC,EASlD,EAAE,EAAE;QAT8C,EACpE,QAAQ,EACR,cAAc,EACd,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,WAAW,GAAG,OAAO,OAEH,EADf,KAAK,sBAR4D,oGASrE,CADS;IAER,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAS,gBAAgB,CAAC,CAAC;IAEzE,MAAM,mBAAmB,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;QACzD,MAAM,EAAE,OAAO,EAAE,KAAK,KAAe,MAAM,EAAhB,KAAK,kBAAK,MAAM,EAArC,oBAA4B,CAAS,CAAC;QAC5C,MAAM,UAAU,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;QACjD,OAAO,CACL,8BAAC,qBAAY,oBAAK,KAAK,IAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,KACtE,OAAO,CACK,CAChB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,QAAQ,IAAI,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;QAC9B,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,CAAC,MAAyD,EAAE,KAAkC,EAAE,EAAE;QAClH,QAAQ,IAAI,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACpC,WAAW,CAAC,KAAe,CAAC,CAAC;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,SAAuC,EAAE,EAAE,CAAC,CAC1D,8BAAC,uBAAU,IACT,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,aAAa,EACtB,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EACH;YACE,KAAK,EAAE,WAAW;SACI,IAGzB,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,QAAQ,CAC9B,CACd,CAAC;IAEF,OAAO,CACL,8BAAC,eAAM,kBACL,EAAE,EAAC,eAAe,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,SAAS,EACnB,YAAY,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,EAC3C,MAAM,EAAE,MAAM,EACd,yBAAyB,QACzB,GAAG,EAAE,QAAQ,IACT,KAAK;QAET,8BAAC,mBAAU,QAAE,mBAAmB,CAAc,CACvC,CACV,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,YAAY,GAAG,eAAK,CAAC,UAAU,CAAC,CAAC,KAAwB,EAAE,GAAmB,EAAE,EAAE,CAAC,CAC9F,8BAAC,gBAAgB,oBAAK,KAAK,IAAE,QAAQ,EAAE,GAAG,IAAI,CAC/C,CAAC,CAAC;AAEH,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/src/components/Select/__snapshots__/CheckboxSelectSnapshots.test.tsx.snap

@@ -1,212 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`checkbox select with no props snapshot 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="false"
-    class="pf-v6-c-menu-toggle"
-    style="width: 200px;"
-    type="button"
-  >
-    <span
-      class="pf-v6-c-menu-toggle__text"
-    >
-      Filter by status
-    </span>
-    <span
-      class="pf-v6-c-menu-toggle__controls"
-    >
-      <span
-        class="pf-v6-c-menu-toggle__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </span>
-  </button>
-</DocumentFragment>
-`;
-
-exports[`opened checkbox select snapshot 1`] = `
-<DocumentFragment>
-  <button
-    aria-expanded="true"
-    class="pf-v6-c-menu-toggle pf-m-expanded"
-    style="width: 200px;"
-    type="button"
-  >
-    <span
-      class="pf-v6-c-menu-toggle__text"
-    >
-      Filter by status
-    </span>
-    <span
-      class="pf-v6-c-menu-toggle__controls"
-    >
-      <span
-        class="pf-v6-c-menu-toggle__toggle-icon"
-      >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 320 512"
-          width="1em"
-        >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
-        </svg>
-      </span>
-    </span>
-  </button>
-  <div
-    class="pf-v6-c-menu"
-    data-ouia-component-id="OUIA-Generated-Select-3"
-    data-ouia-component-type="PF6/Select"
-    data-ouia-safe="true"
-    data-popper-escaped="true"
-    data-popper-placement="bottom-start"
-    data-popper-reference-hidden="true"
-    id="checkbox-select"
-    style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 0ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: 0px; transform: translate(0px, 0px);"
-  >
-    <div
-      class="pf-v6-c-menu__content"
-    >
-      <ul
-        class="pf-v6-c-menu__list"
-        role="menu"
-      >
-        <li
-          class="pf-v6-c-menu__list-item"
-          role="menuitem"
-        >
-          <label
-            class="pf-v6-c-menu__item"
-            for="generated-id"
-            tabindex="-1"
-          >
-            <span
-              class="pf-v6-c-menu__item-main"
-            >
-              <span
-                class="pf-v6-c-menu__item-check"
-              >
-                <span
-                  class="pf-v6-c-check pf-m-standalone"
-                >
-                  <input
-                    aria-disabled="false"
-                    aria-invalid="false"
-                    class="pf-v6-c-check__input"
-                    data-ouia-component-id="OUIA-Generated-Checkbox-1"
-                    data-ouia-component-type="PF6/Checkbox"
-                    data-ouia-safe="true"
-                    id="generated-id"
-                    type="checkbox"
-                  />
-                </span>
-              </span>
-              <span
-                class="pf-v6-c-menu__item-text"
-              >
-                Option 1
-              </span>
-            </span>
-          </label>
-        </li>
-        <li
-          class="pf-v6-c-menu__list-item"
-          role="menuitem"
-        >
-          <label
-            class="pf-v6-c-menu__item"
-            for="generated-id"
-            tabindex="-1"
-          >
-            <span
-              class="pf-v6-c-menu__item-main"
-            >
-              <span
-                class="pf-v6-c-menu__item-check"
-              >
-                <span
-                  class="pf-v6-c-check pf-m-standalone"
-                >
-                  <input
-                    aria-disabled="false"
-                    aria-invalid="false"
-                    class="pf-v6-c-check__input"
-                    data-ouia-component-id="OUIA-Generated-Checkbox-2"
-                    data-ouia-component-type="PF6/Checkbox"
-                    data-ouia-safe="true"
-                    id="generated-id"
-                    type="checkbox"
-                  />
-                </span>
-              </span>
-              <span
-                class="pf-v6-c-menu__item-text"
-              >
-                Option 2
-              </span>
-            </span>
-          </label>
-        </li>
-        <li
-          class="pf-v6-c-menu__list-item"
-          role="menuitem"
-        >
-          <label
-            class="pf-v6-c-menu__item"
-            for="generated-id"
-            tabindex="-1"
-          >
-            <span
-              class="pf-v6-c-menu__item-main"
-            >
-              <span
-                class="pf-v6-c-menu__item-check"
-              >
-                <span
-                  class="pf-v6-c-check pf-m-standalone"
-                >
-                  <input
-                    aria-disabled="false"
-                    aria-invalid="false"
-                    class="pf-v6-c-check__input"
-                    data-ouia-component-id="OUIA-Generated-Checkbox-3"
-                    data-ouia-component-type="PF6/Checkbox"
-                    data-ouia-safe="true"
-                    id="generated-id"
-                    type="checkbox"
-                  />
-                </span>
-              </span>
-              <span
-                class="pf-v6-c-menu__item-text"
-              >
-                Option 3
-              </span>
-            </span>
-          </label>
-        </li>
-      </ul>
-    </div>
-  </div>
-</DocumentFragment>
-`;