@fluentui/react-select 9.0.0-beta.2 → 9.0.0-beta.21

package/lib-commonjs/SelectField.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/SelectField/index"), exports);
+//# sourceMappingURL=SelectField.js.map

package/lib-commonjs/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/SelectField.ts"],"sourcesContent":["export * from './components/SelectField/index';\n"]}

package/lib-commonjs/components/Select/Select.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Select = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useSelect_1 = /*#__PURE__*/require("./useSelect");
-
 const renderSelect_1 = /*#__PURE__*/require("./renderSelect");
-
 const useSelectStyles_1 = /*#__PURE__*/require("./useSelectStyles");
 /**
  * Select component
  */
-
-
 exports.Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSelect_1.useSelect_unstable(props, ref);
   useSelectStyles_1.useSelectStyles_unstable(state);

package/lib-commonjs/components/Select/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtF,QAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;AAEA,EAAA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;AACA,SAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,cAAM,gBAAqCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGC,8BAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE5CG,0CAAwB,CAACF,KAAK,CAAC;EAC/B,OAAOG,oCAAqB,CAACH,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFL,cAAM,CAACS,WAAW,GAAG,QAAQ","names":["exports","React","forwardRef","props","ref","state","useSelect_1","useSelectStyles_1","renderSelect_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"]}

package/lib-commonjs/components/Select/Select.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/Select/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Select"), exports);
-
 tslib_1.__exportStar(require("./Select.types"), exports);
-
 tslib_1.__exportStar(require("./renderSelect"), exports);
-
 tslib_1.__exportStar(require("./useSelect"), exports);
-
 tslib_1.__exportStar(require("./useSelectStyles"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/Select/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/index.ts"],"sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"]}

package/lib-commonjs/components/Select/renderSelect.js

@@ -4,25 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderSelect_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Select
  */
-
-
 const renderSelect_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, React.createElement(slots.select, { ...slotProps.select
-  }, slotProps.select.children), React.createElement(slots.icon, { ...slotProps.icon
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.select, {
+    ...slotProps.select
+  }, slotProps.select.children), React.createElement(slots.icon, {
+    ...slotProps.icon
   }));
 };
-
 exports.renderSelect_unstable = renderSelect_unstable;
 //# sourceMappingURL=renderSelect.js.map

package/lib-commonjs/components/Select/renderSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/renderSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;AAC1D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;AAAf,GAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAFF,CADF;AAMD,CARM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  const { slots, slotProps } = getSlots<SelectSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n      <slots.icon {...slotProps.icon} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAcH,KAAK,CAAC;EACzD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAAGJ,SAAS,CAACI,MAAM,CAACC,QAAQ,CAAgB,EAC9EH,oBAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACvB;AAEjB,CAAC;AARYC,6BAAqB","names":["renderSelect_unstable","state","slots","slotProps","react_utilities_1","React","root","select","children","icon","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/renderSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  const { slots, slotProps } = getSlots<SelectSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n      <slots.icon {...slotProps.icon} />\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/Select/useSelect.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSelect_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
 /**
  * Create the state required to render Select.
@@ -19,26 +16,25 @@ const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
  * @param props - props from this instance of Select
  * @param ref - reference to the `<select>` element in Select
  */
-
-
 const useSelect_unstable = (props, ref) => {
   const {
+    defaultValue,
+    value,
     select,
     icon,
     root,
-    size = 'medium',
     appearance = 'outline',
-    inline = false
+    onChange,
+    size = 'medium'
   } = props;
   const nativeProps = react_utilities_1.getPartitionedNativeProps({
     props,
     primarySlotTagName: 'select',
-    excludedPropNames: ['appearance', 'inline', 'size']
+    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value']
   });
-  return {
+  const state = {
     size,
     appearance,
-    inline,
     components: {
       root: 'span',
       select: 'select',
@@ -47,6 +43,8 @@ const useSelect_unstable = (props, ref) => {
     select: react_utilities_1.resolveShorthand(select, {
       required: true,
       defaultProps: {
+        defaultValue,
+        value,
         ref,
         ...nativeProps.primary
       }
@@ -62,7 +60,12 @@ const useSelect_unstable = (props, ref) => {
       defaultProps: nativeProps.root
     })
   };
+  state.select.onChange = react_utilities_1.useEventCallback(event => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, {
+      value: event.target.value
+    });
+  });
+  return state;
 };
-
 exports.useSelect_unstable = useSelect_unstable;
 //# sourceMappingURL=useSelect.js.map

package/lib-commonjs/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;AACvG,QAAM;AAAE,IAAA,MAAF;AAAU,IAAA,IAAV;AAAgB,IAAA,IAAhB;AAAsB,IAAA,IAAI,GAAG,QAA7B;AAAuC,IAAA,UAAU,GAAG,SAApD;AAA+D,IAAA,MAAM,GAAG;AAAxE,MAAkF,KAAxF;AAEA,QAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;AAC5C,IAAA,KAD4C;AAE5C,IAAA,kBAAkB,EAAE,QAFwB;AAG5C,IAAA,iBAAiB,EAAE,CAAC,YAAD,EAAe,QAAf,EAAyB,MAAzB;AAHyB,GAA1B,CAApB;AAMA,SAAO;AACL,IAAA,IADK;AAEL,IAAA,UAFK;AAGL,IAAA,MAHK;AAIL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,MADI;AAEV,MAAA,MAAM,EAAE,QAFE;AAGV,MAAA,IAAI,EAAE;AAHI,KAJP;AASL,IAAA,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;AAC/B,MAAA,QAAQ,EAAE,IADqB;AAE/B,MAAA,YAAY,EAAE;AACZ,QAAA,GADY;AAEZ,WAAG,WAAW,CAAC;AAFH;AAFiB,KAAzB,CATH;AAgBL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;AAAZ;AAFa,KAAvB,CAhBD;AAoBL,IAAA,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;AAC3B,MAAA,QAAQ,EAAE,IADiB;AAE3B,MAAA,YAAY,EAAE,WAAW,CAAC;AAFC,KAAvB;AApBD,GAAP;AAyBD,CAlCM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const { select, icon, root, size = 'medium', appearance = 'outline', inline = false } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'inline', 'size'],\n  });\n\n  return {\n    size,\n    appearance,\n    inline,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: resolveShorthand(select, {\n      required: true,\n      defaultProps: {\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    icon: resolveShorthand(icon, {\n      required: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n    }),\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAAiC,KAAiB;EACvG,MAAM;IACJC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,IAAI;IACJC,UAAU,GAAG,SAAS;IAEtBC,QAAQ;IACRC,IAAI,GAAG;EAAQ,CAChB,GAAGT,KAAK;EAET,MAAMU,WAAW,GAAGC,2CAAyB,CAAC;IAC5CX,KAAK;IACLY,kBAAkB,EAAE,QAAQ;IAC5BC,iBAAiB,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO;GAC9E,CAAC;EAEF,MAAMC,KAAK,GAAgB;IACzBL,IAAI;IACJF,UAAU;IACVQ,UAAU,EAAE;MACVT,IAAI,EAAE,MAAM;MACZF,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE;KACP;IACDD,MAAM,EAAEO,kCAAgB,CAACP,MAAM,EAAE;MAC/BY,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZf,YAAY;QACZC,KAAK;QACLF,GAAG;QACH,GAAGS,WAAW,CAACQ;;KAElB,CAAC;IACFb,IAAI,EAAEM,kCAAgB,CAACN,IAAI,EAAE;MAC3BW,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QAAEE,QAAQ,EAAEC,oBAACC,gCAAkB;MAAG;KACjD,CAAC;IACFf,IAAI,EAAEK,kCAAgB,CAACL,IAAI,EAAE;MAC3BU,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAEP,WAAW,CAACJ;KAC3B;GACF;EAEDQ,KAAK,CAACV,MAAM,CAACI,QAAQ,GAAGG,kCAAgB,CAACW,KAAK,IAAG;IAC/Cd,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGc,KAAK,EAAE;MAAEnB,KAAK,EAAGmB,KAAK,CAACC,MAA4B,CAACpB;IAAK,CAAE,CAAC;EACzE,CAAC,CAAC;EAEF,OAAOW,KAAK;AACd,CAAC;AAnDYU,0BAAkB","names":["useSelect_unstable","props","ref","defaultValue","value","select","icon","root","appearance","onChange","size","nativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","state","components","required","defaultProps","primary","children","React","react_icons_1","event","target","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: resolveShorthand(select, {\n      required: true,\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    icon: resolveShorthand(icon, {\n      required: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n    }),\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"]}