@workday/canvas-kit-docs 16.0.12 → 16.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -47918,7 +47918,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
47918
47918
  "type": {
47919
47919
  "kind": "enhancedComponent",
47920
47920
  "componentType": "subcomponent",
47921
- "elemPropsHook": "useMultiSelectInput",
47921
+ "elemPropsHook": "useMultiSelectSearchInput",
47922
47922
  "props": [
47923
47923
  {
47924
47924
  "kind": "property",
@@ -228019,6 +228019,22 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
228019
228019
  "properties": []
228020
228020
  }
228021
228021
  },
228022
+ {
228023
+ "name": "CanvasThemeAttributeContext",
228024
+ "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx",
228025
+ "description": "Context for providing the `data-theme` value to popup containers.\n\nToken stylesheets scope their variables to an attribute selector (e.g. Sana's\n`[data-theme=\"sana-canvas\"]` block defines ~300 variables — palette, shape, depth, type).\nPortaled popups render under `document.body`, outside the `CanvasProvider` wrapper, so they\nnever inherit a nested `data-theme` and none of those variables resolve. Forwarding the\nattribute itself lets the popup container match the same selector, so the whole theme applies\nthrough normal cascade — rather than trying to mirror every variable as an inline style.",
228026
+ "declarations": [
228027
+ {
228028
+ "name": "CanvasThemeAttributeContext",
228029
+ "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx"
228030
+ }
228031
+ ],
228032
+ "tags": {},
228033
+ "type": {
228034
+ "kind": "object",
228035
+ "properties": []
228036
+ }
228037
+ },
228022
228038
  {
228023
228039
  "name": "CanvasProviderProps",
228024
228040
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/CanvasProvider.tsx",
@@ -230867,7 +230883,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
230867
230883
  {
230868
230884
  "kind": "symbol",
230869
230885
  "name": "CanvasBrandRamp",
230870
- "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
230886
+ "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
230871
230887
  },
230872
230888
  {
230873
230889
  "kind": "symbol",
@@ -232780,7 +232796,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
232780
232796
  {
232781
232797
  "name": "sanaCanvasNumericalTheme",
232782
232798
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/sanaTheme.ts",
232783
- "description": "Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.\nValues are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.",
232799
+ "description": "Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.\nValues are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.\n\nMirrors only what Sana's stylesheet itself defines: the `neutral` ramp, the `A300` step of\n`primary`/`critical`/`caution`/`positive` (the one step Sana redefines for those families — a\nstronger alpha wash on the matching hue), and the four `system.color.brand.*` tokens Sana\noverrides. Every other key is intentionally omitted — Sana does not define a distinct value\nfor it, so writing it here would only reference the very variable being written (a `var()`\ncycle that resolves to invalid, leaking the classic-theme fallback color instead of Sana's).\n\n`action.*` and `selected.*` are deliberately **not** set. Sana's stylesheet does not define\n`--cnvs-brand-action-*` or `--cnvs-sys-color-brand-fg-selected`/`-surface-selected`; those are\nderived downstream from the root theme. Forcing them here would pin values the root is meant\nto own.\n\nRamp values must reference `base.*` (the underlying palette), never `brand.*` of the same\nname — CanvasProvider writes each entry onto the identically-named `--cnvs-brand-*` CSS\nvariable, so referencing `brand.*` here would create that same self-reference cycle. The\n`system.color.brand.*` overrides are the exception: they target *different* CSS variables\n(`--cnvs-sys-color-brand-*`) than the `brand.*` values they reference, so no cycle.\n\nNote this preset only covers brand tokens. The rest of Sana (shape, depth, type, non-brand\nsystem colors) comes from the stylesheet's `[data-theme=\"sana-canvas\"]` block — pass\n`data-theme` to `CanvasProvider` alongside this preset and it is forwarded to portaled popups\nso the full theme applies there too.",
232784
232800
  "declarations": [
232785
232801
  {
232786
232802
  "name": "sanaCanvasNumericalTheme",
@@ -232797,7 +232813,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
232797
232813
  {
232798
232814
  "name": "sanaCanvasProviderTheme",
232799
232815
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/sanaTheme.ts",
232800
- "description": "Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers\n(menus, selects, modals, tooltips).\n\n**When to use it**\n- **Required** when you cannot set `data-theme=\"sana-canvas\"` on `<html>` (embedded apps,\n microfrontends, third-party shells). Popups portal to `document.body` and will not inherit\n a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.\n- Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.\n\n**When you can skip it**\n- Prefer setting `data-theme=\"sana-canvas\"` on `<html>` with Sana CSS imported. Popups then\n inherit brand variables from the document and no `theme` prop is needed.",
232816
+ "description": "Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers\n(menus, selects, modals, tooltips).\n\n**When to use it**\n- **Required** when you cannot set `data-theme=\"sana-canvas\"` on `<html>` (embedded apps,\n microfrontends, third-party shells). Popups portal to `document.body` and will not inherit\n a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.\n- Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.\n\n**When you can skip it**\n- Prefer setting `data-theme=\"sana-canvas\"` on `<html>` with Sana CSS imported. Popups then\n inherit brand variables from the document and no `theme` prop is needed.\n\nPass `data-theme=\"sana-canvas\"` alongside it. That attribute is forwarded to popup stack\ncontainers, so the rest of Sana (shape, depth, type, non-brand system colors) applies to\nportaled content through the stylesheet's own `[data-theme=\"sana-canvas\"]` block — this preset\ncovers brand tokens, the attribute covers everything else.\n\n`action.*` and selected-state tokens are not set by this preset — Sana does not define them,\nand they resolve from the root theme.",
232801
232817
  "declarations": [
232802
232818
  {
232803
232819
  "name": "sanaCanvasProviderTheme",
@@ -232805,7 +232821,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
232805
232821
  }
232806
232822
  ],
232807
232823
  "tags": {
232808
- "example": "```tsx\n// Preferred — control <html>\nimport '@workday/canvas-tokens-web/css/sana/_variables.css';\n// <html data-theme=\"sana-canvas\">\n<CanvasProvider><App /></CanvasProvider>\n\n// No access to <html> — required for popup parity\n<CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>\n```"
232824
+ "example": "```tsx\n// Preferred — control <html>\nimport '@workday/canvas-tokens-web/css/sana/_variables.css';\n// <html data-theme=\"sana-canvas\">\n<CanvasProvider><App /></CanvasProvider>\n\n// No access to <html> — pass both for full parity, including portaled popups\n<CanvasProvider theme={sanaCanvasProviderTheme} data-theme=\"sana-canvas\">\n <App />\n</CanvasProvider>\n```"
232809
232825
  },
232810
232826
  "type": {
232811
232827
  "kind": "symbol",
@@ -233874,6 +233890,10 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
233874
233890
  {
233875
233891
  "kind": "string",
233876
233892
  "value": "A200"
233893
+ },
233894
+ {
233895
+ "kind": "string",
233896
+ "value": "A300"
233877
233897
  }
233878
233898
  ]
233879
233899
  },
@@ -233891,7 +233911,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
233891
233911
  {
233892
233912
  "name": "CanvasNeutralBrandRamp",
233893
233913
  "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts",
233894
- "description": "Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not\nexported for primary/critical/caution/positive families.",
233914
+ "description": "Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150` / `A850`), plus the\nextended alpha steps (`A400`–`A975`) that only the neutral family exposes.",
233895
233915
  "declarations": [
233896
233916
  {
233897
233917
  "name": "CanvasNeutralBrandRamp",
@@ -233908,7 +233928,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
233908
233928
  {
233909
233929
  "kind": "symbol",
233910
233930
  "name": "CanvasBrandRamp",
233911
- "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
233931
+ "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
233912
233932
  },
233913
233933
  {
233914
233934
  "kind": "symbol",
@@ -233933,6 +233953,42 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
233933
233953
  {
233934
233954
  "kind": "string",
233935
233955
  "value": "A150"
233956
+ },
233957
+ {
233958
+ "kind": "string",
233959
+ "value": "A400"
233960
+ },
233961
+ {
233962
+ "kind": "string",
233963
+ "value": "A500"
233964
+ },
233965
+ {
233966
+ "kind": "string",
233967
+ "value": "A600"
233968
+ },
233969
+ {
233970
+ "kind": "string",
233971
+ "value": "A700"
233972
+ },
233973
+ {
233974
+ "kind": "string",
233975
+ "value": "A800"
233976
+ },
233977
+ {
233978
+ "kind": "string",
233979
+ "value": "A850"
233980
+ },
233981
+ {
233982
+ "kind": "string",
233983
+ "value": "A900"
233984
+ },
233985
+ {
233986
+ "kind": "string",
233987
+ "value": "A950"
233988
+ },
233989
+ {
233990
+ "kind": "string",
233991
+ "value": "A975"
233936
233992
  }
233937
233993
  ]
233938
233994
  },
@@ -234080,7 +234136,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
234080
234136
  "type": {
234081
234137
  "kind": "symbol",
234082
234138
  "name": "CanvasBrandRamp",
234083
- "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
234139
+ "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
234084
234140
  },
234085
234141
  "description": "Primary brand ramp (`--cnvs-brand-primary-*`).\n\n**Shortcut (brand scope only):** when `'600'` is the only key under `primary`,\nalso sets:\n- `PrimaryButton` — `brand.action.base`, `accent.primary`, `accent.action`\n- Selected `Menu.Item` — `system.color.brand.fg.selected`, `surface.selected`\n\nDoes **not** set focus rings — use {@link CanvasNumericalBrandTheme.focus }\nor legacy `canvas.palette.common.focusOutline`.\n\n| Key | CSS variable | Typical consumers |\n|-----|--------------|-------------------|\n| `'600'` | `--cnvs-brand-primary-600` | PrimaryButton, brand links, accent.primary |\n| `'700'` | `--cnvs-brand-primary-700` | Strong primary fg, selected text |\n| `'500'` | `--cnvs-brand-primary-500` | Mid primary ramp only (not focus) |\n| `'A50'` | `--cnvs-brand-primary-A50` | Selected/hover surfaces |",
234086
234142
  "declarations": [
@@ -234116,7 +234172,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
234116
234172
  "type": {
234117
234173
  "kind": "symbol",
234118
234174
  "name": "CanvasBrandRamp",
234119
- "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
234175
+ "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
234120
234176
  },
234121
234177
  "description": "Critical/error ramp (`--cnvs-brand-critical-*`).\n\n| Key | Typical consumers |\n|-----|-------------------|\n| `'600'` | TextInput error, DeleteButton, critical fg |\n| `'500'` | Critical focus ring, error border |\n| `'A25'` / `'A50'` | Error surface tints |",
234122
234178
  "declarations": [
@@ -234134,7 +234190,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
234134
234190
  "type": {
234135
234191
  "kind": "symbol",
234136
234192
  "name": "CanvasBrandRamp",
234137
- "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
234193
+ "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
234138
234194
  },
234139
234195
  "description": "Caution/warning ramp (`--cnvs-brand-caution-*`).\n\n| Key | Typical consumers |\n|-----|-------------------|\n| `'400'` | Caution accent, TextInput caution |\n| `'500'` | Caution focus outer, caution border |\n| `'A25'` / `'A50'` | Caution surface tints |",
234140
234196
  "declarations": [
@@ -234152,7 +234208,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
234152
234208
  "type": {
234153
234209
  "kind": "symbol",
234154
234210
  "name": "CanvasBrandRamp",
234155
- "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\", string>>"
234211
+ "value": "Partial<Record<\"25\" | \"50\" | \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\" | \"950\" | \"975\" | \"A25\" | \"A50\" | \"A100\" | \"A200\" | \"A300\", string>>"
234156
234212
  },
234157
234213
  "description": "Positive/success ramp (`--cnvs-brand-positive-*`).\n\n| Key | Typical consumers |\n|-----|-------------------|\n| `'600'` | Checkbox/Radio checked, success fg |\n| `'A25'` / `'A50'` | Success surface tints |",
234158
234214
  "declarations": [
@@ -2719,6 +2719,48 @@ module.exports = {specifications: [
2719
2719
  }
2720
2720
  ]
2721
2721
  },
2722
+ {
2723
+ "type": "file",
2724
+ "name": "MultiSelect",
2725
+ "children": [
2726
+ {
2727
+ "type": "describe",
2728
+ "name": "MultiSelect",
2729
+ "children": [
2730
+ {
2731
+ "type": "describe",
2732
+ "name": "given the Searching story is rendered",
2733
+ "children": [
2734
+ {
2735
+ "type": "describe",
2736
+ "name": "when Enter is pressed before typing",
2737
+ "children": [
2738
+ {
2739
+ "type": "it",
2740
+ "name": "should keep the listbox hidden"
2741
+ }
2742
+ ]
2743
+ },
2744
+ {
2745
+ "type": "describe",
2746
+ "name": "when search text is entered using the keyboard",
2747
+ "children": [
2748
+ {
2749
+ "type": "it",
2750
+ "name": "should not have any axe errors"
2751
+ },
2752
+ {
2753
+ "type": "it",
2754
+ "name": "should open the listbox with the filtered result"
2755
+ }
2756
+ ]
2757
+ }
2758
+ ]
2759
+ }
2760
+ ]
2761
+ }
2762
+ ]
2763
+ },
2722
2764
  {
2723
2765
  "type": "file",
2724
2766
  "name": "Pagination",
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
18
18
  "@emotion/react": "11.11.4",
19
19
  "@types/react": "18.2.60",
20
20
  "@types/react-dom": "18.2.19",
21
- "@workday/canvas-kit-labs-react": "16.0.12",
22
- "@workday/canvas-kit-preview-react": "16.0.12",
23
- "@workday/canvas-kit-react": "16.0.12",
24
- "@workday/canvas-kit-react-fonts": "^16.0.12",
25
- "@workday/canvas-kit-styling": "16.0.12",
21
+ "@workday/canvas-kit-labs-react": "16.0.14",
22
+ "@workday/canvas-kit-preview-react": "16.0.14",
23
+ "@workday/canvas-kit-react": "16.0.14",
24
+ "@workday/canvas-kit-react-fonts": "^16.0.14",
25
+ "@workday/canvas-kit-styling": "16.0.14",
26
26
  "@workday/canvas-system-icons-web": "^5.0.3",
27
27
  "@workday/canvas-expressive-icons-web": "1.0.1",
28
28
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
19
19
  "@emotion/react": "11.11.4",
20
20
  "@types/react": "18.2.60",
21
21
  "@types/react-dom": "18.2.19",
22
- "@workday/canvas-kit-labs-react": "16.0.12",
23
- "@workday/canvas-kit-preview-react": "16.0.12",
24
- "@workday/canvas-kit-react": "16.0.12",
25
- "@workday/canvas-kit-react-fonts": "^16.0.12",
26
- "@workday/canvas-kit-styling": "16.0.12",
22
+ "@workday/canvas-kit-labs-react": "16.0.14",
23
+ "@workday/canvas-kit-preview-react": "16.0.14",
24
+ "@workday/canvas-kit-react": "16.0.14",
25
+ "@workday/canvas-kit-react-fonts": "^16.0.14",
26
+ "@workday/canvas-kit-styling": "16.0.14",
27
27
  "@workday/canvas-system-icons-web": "^5.0.3",
28
28
  "@workday/canvas-expressive-icons-web": "1.0.1",
29
29
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
@@ -70,6 +70,21 @@ parent component's DOM hierarchy, and only inherit theme from `<html>`, or from
70
70
  > `[data-theme="sana-canvas"]` overrides, so removing the attribute is how you get classic Canvas —
71
71
  > there's nothing to undo it with.
72
72
 
73
+ **Scoped / no document-root control:** if you cannot set `data-theme` on `<html>` (embedded apps,
74
+ microfrontends, third-party shells), pass both `data-theme="sana-canvas"` and
75
+ `sanaCanvasProviderTheme` to `CanvasProvider`. The preset supplies Sana's brand variables, and
76
+ Canvas Kit forwards the `data-theme` attribute onto the popup stack container — so portaled
77
+ menus, modals, and dialogs match the same `[data-theme="sana-canvas"]` selector and pick up the
78
+ rest of the theme (shape, depth, type, non-brand system colors) through normal cascade:
79
+
80
+ ```tsx
81
+ import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';
82
+
83
+ <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
84
+ <App />
85
+ </CanvasProvider>
86
+ ```
87
+
73
88
  ### What Changes When You Opt In
74
89
 
75
90
  Things that change are primary brand consumers and Sana's neutral color scale
@@ -116,9 +116,11 @@ import {CanvasProvider} from '@workday/canvas-kit-react/common';
116
116
  ```
117
117
 
118
118
  **Scoped / no document-root control:** if you cannot set `data-theme` on `<html>` (embedded apps,
119
- microfrontends, third-party shells), a nested `data-theme` alone does **not** reach portaled
120
- popups. Pass both `data-theme="sana-canvas"` (for in-tree UI) and `sanaCanvasProviderTheme` (so
121
- Canvas Kit forwards Sana brand variables onto the popup stack container):
119
+ microfrontends, third-party shells), pass both `data-theme="sana-canvas"` and
120
+ `sanaCanvasProviderTheme` to `CanvasProvider`. The preset supplies Sana's brand variables, and
121
+ Canvas Kit forwards the `data-theme` attribute onto the popup stack container — so portaled
122
+ menus, modals, and dialogs match the same `[data-theme="sana-canvas"]` selector and pick up the
123
+ rest of the theme (shape, depth, type, non-brand system colors) through normal cascade:
122
124
 
123
125
  ```tsx
124
126
  import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';
@@ -1,9 +1,11 @@
1
1
  import React from 'react';
2
2
 
3
- import {PrimaryButton, SecondaryButton} from '@workday/canvas-kit-react/button';
3
+ import {PrimaryButton} from '@workday/canvas-kit-react/button';
4
4
  import {CanvasProvider, sanaCanvasProviderTheme} from '@workday/canvas-kit-react/common';
5
+ import {FormField} from '@workday/canvas-kit-react/form-field';
5
6
  import {Menu} from '@workday/canvas-kit-react/menu';
6
7
  import {Popup, useCloseOnOutsideClick, usePopupModel} from '@workday/canvas-kit-react/popup';
8
+ import {TextInput} from '@workday/canvas-kit-react/text-input';
7
9
 
8
10
  /**
9
11
  * Scoped Sana setup for popup parity: `data-theme` themes the in-tree UI, and
@@ -16,17 +18,25 @@ export default () => {
16
18
  return (
17
19
  <CanvasProvider theme={sanaCanvasProviderTheme} data-theme="sana-canvas">
18
20
  <Popup model={myModel}>
19
- <Popup.Target as={SecondaryButton}>Open Menu</Popup.Target>
21
+ <Popup.Target as={PrimaryButton}>Open Menu</Popup.Target>
20
22
  <Popup.Popper>
21
23
  <Popup.Card>
22
24
  <Popup.Body>
23
- <Menu>
24
- <Menu.Item>Option 1</Menu.Item>
25
- <Menu.Item>Option 2</Menu.Item>
26
- <Menu.Item>Option 3</Menu.Item>
25
+ <Menu initialSelectedIds={['selected']}>
26
+ <Menu.List role="listbox">
27
+ <Menu.Option data-id="selected">Option 1</Menu.Option>
28
+ <Menu.Option>Option 2</Menu.Option>
29
+ <Menu.Option>Option 3</Menu.Option>
30
+ </Menu.List>
27
31
  </Menu>
28
32
  <PrimaryButton>Hello World</PrimaryButton>
29
33
  </Popup.Body>
34
+ <FormField>
35
+ <FormField.Label>Example text input</FormField.Label>
36
+ <FormField.Field>
37
+ <FormField.Input as={TextInput} />
38
+ </FormField.Field>
39
+ </FormField>
30
40
  </Popup.Card>
31
41
  </Popup.Popper>
32
42
  </Popup>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "16.0.12",
3
+ "version": "16.0.14",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -47,10 +47,10 @@
47
47
  "@stackblitz/sdk": "^1.11.0",
48
48
  "@storybook/csf": "0.0.1",
49
49
  "@workday/canvas-expressive-icons-web": "1.0.2",
50
- "@workday/canvas-kit-labs-react": "^16.0.12",
51
- "@workday/canvas-kit-preview-react": "^16.0.12",
52
- "@workday/canvas-kit-react": "^16.0.12",
53
- "@workday/canvas-kit-styling": "^16.0.12",
50
+ "@workday/canvas-kit-labs-react": "^16.0.14",
51
+ "@workday/canvas-kit-preview-react": "^16.0.14",
52
+ "@workday/canvas-kit-react": "^16.0.14",
53
+ "@workday/canvas-kit-styling": "^16.0.14",
54
54
  "@workday/canvas-system-icons-web": "^5.0.3",
55
55
  "@workday/canvas-tokens-web": "^4.4.0",
56
56
  "markdown-to-jsx": "^7.2.0",
@@ -63,5 +63,5 @@
63
63
  "mkdirp": "^1.0.3",
64
64
  "typescript": "5.0"
65
65
  },
66
- "gitHead": "e5a8658cb7f35a14333b162a8b4001d899a010a6"
66
+ "gitHead": "dd1a615f55e73a45836ac2ef7056dc1fb95ba1cd"
67
67
  }