chore: add empty changeset

.changeset/sharp-garlics-switch.md

@@ -0,0 +1,2 @@
+---
+---

packages/components/src/__future__/Select/_docs/Select-api.mdx

@@ -0,0 +1,103 @@
+import { Canvas, Controls, Meta } from "@storybook/blocks"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
+import * as SelectStories from "./Select.stories"
+
+<Meta title="Components/Select/Select (Future)/API Specification" />
+
+# Select
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Select"
+  figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=9%3A37837&mode=dev"
+  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select"
+
+/>
+
+<KAIOInstallation exportNames="Select" isFuture />
+
+## Playground
+
+<Canvas of={SelectStories.Playground} />
+<Controls of={SelectStories.Playground} />
+
+## API
+
+### Options
+
+Provide options in `items` in the `SelectOption` format to populate the options.
+```ts
+export type SelectOption = {
+  label: string
+  value: string | number
+  disabled?: boolean
+  options?: never
+}
+
+```
+<Canvas of={SelectStories.SingleItems} />
+
+### Grouped options
+
+Group options by providing your `items` in the `SelectOptionGroup` format.
+```ts
+export type SelectOptionGroup<Option extends SelectOption> = {
+  label: string
+  options: Iterable<Option>
+}
+
+```
+<Canvas of={SelectStories.GroupedItems} />
+
+### Disabled options
+
+Disable options by setting the `disabled` attribute within an individual option your `items` to `true`.
+
+Alternatively, define the `disabledKeys` prop with the `value` of your options.<br/>
+**Note:** This will override the definitions in `items`.
+
+<Canvas of={SelectStories.DisabledItems} />
+
+### Custom options rendering
+
+Customise the list of options using `children` (render function with arg `{ items: Array<SelectItemNode<Option>>}`).
+
+Use the default render component `<Select.ItemDefaultRender>` for any items you do not want to customise.
+
+#### Section divider
+
+To add a section divider between your options, use the `children` render function and find the item or group
+you want to prepend/append to and add a `<Select.SectionDivider>`.
+
+<Canvas of={SelectStories.SectionDivider} />
+
+#### Additional option properties (generic)
+
+Extend the option type to have additional properties to use for rendering.
+
+<Canvas of={SelectStories.AdditionalProperties} />
+
+### Customise trigger button
+
+The `trigger` prop allows you to extend the existing `<Select.TriggerButton>` with additional properties (eg. `id`).
+
+Note that the `ref` exists as part of these spread props (there is a second arg containing the `ref` which is deprecated).
+
+<Canvas of={SelectStories.CustomiseTrigger} />
+
+### Validation
+
+Add validation messages using `status` and `validationMessage`.
+<Canvas of={SelectStories.Validation} />
+
+### Full width
+
+Set `isFullWidth` to `true` to have the Select span the full width of its container.
+<Canvas of={SelectStories.FullWidth} />
+
+### Portals
+
+By default, the Select's popover will attach itself to the `body` of the document using React's `createPortal`.
+
+You can change the default behaviour by providing a `portalContainerId` to attach this to different element in the DOM. This can help to resolve issues that may arise with `z-index` or having a Select in a modal.
+
+<Canvas of={SelectStories.PortalContainer} />

packages/components/src/__future__/Select/_docs/Select.mdx

@@ -2,7 +2,7 @@ import { Canvas, Controls, Meta } from "@storybook/blocks"
 import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as SelectStories from "./Select.stories"
 
-<Meta of={SelectStories} />
+<Meta title="Components/Select/Select (Future)/Usage Guidelines" />
 
 # Select
 

packages/components/src/__future__/Select/_docs/Select.stickersheet.stories.tsx

@@ -17,7 +17,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: "Components/Select/Future",
+  title: "Components/Select/Select (Future)",
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

packages/components/src/__future__/Select/_docs/Select.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from "./mockData"
 
 const meta = {
-  title: "Components/Select/Future",
+  title: "Components/Select/Select (Future)",
   component: Select,
   argTypes: {
     items: {