@atlaskit/form 8.8.2 → 8.8.4

package/dist/cjs/form-footer.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = FormFooter;
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
 /** @jsx jsx */
+
 var gridSize = (0, _constants.gridSize)();
 var formFooterWrapperStyles = (0, _react.css)({
   display: 'flex',
@@ -19,6 +17,7 @@ var formFooterWrapperStyles = (0, _react.css)({
 var justifyContentStyles = (0, _react.css)({
   justifyContent: 'flex-start'
 });
+
 /**
  * __Form footer__
  *
@@ -28,11 +27,10 @@ var justifyContentStyles = (0, _react.css)({
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
 function FormFooter(_ref) {
   var _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'end' : _ref$align,
-      children = _ref.children;
+    align = _ref$align === void 0 ? 'end' : _ref$align,
+    children = _ref.children;
   return (0, _react.jsx)("footer", {
     css: [formFooterWrapperStyles, align === 'start' && justifyContentStyles]
   }, children);

package/dist/cjs/form-header.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.FormHeaderTitle = exports.FormHeaderDescription = exports.FormHeaderContent = void 0;
-
 var _react = require("@emotion/react");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 /** @jsx jsx */
+
 var gridSize = (0, _constants.gridSize)();
 var fontFamily = (0, _constants.fontFamily)();
 var formHeaderContentStyles = (0, _react.css)({
@@ -33,57 +29,50 @@ var formHeaderTitleStyles = (0, _react.css)({
 });
 var formHeaderWrapperStyles = (0, _react.css)({
   fontFamily: "".concat(fontFamily)
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var darkH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
     mode: 'dark'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var lightH700Styles = (0, _react.css)((0, _typography.h700)({
   theme: {
     mode: 'light'
   }
 }));
-
 var FormHeaderContent = function FormHeaderContent(_ref) {
   var children = _ref.children;
   return (0, _react.jsx)("div", {
     css: formHeaderContentStyles
   }, children);
 };
-
 exports.FormHeaderContent = FormHeaderContent;
-
 var FormHeaderDescription = function FormHeaderDescription(_ref2) {
   var children = _ref2.children;
   return (0, _react.jsx)("div", {
     css: formHeaderDescriptionStyles
   }, children);
 };
-
 exports.FormHeaderDescription = FormHeaderDescription;
-
 var FormHeaderTitle = function FormHeaderTitle(_ref3) {
   var children = _ref3.children;
-
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("h2", {
     css: [mode === 'light' ? lightH700Styles : darkH700Styles, formHeaderTitleStyles]
   }, children);
 };
-
 exports.FormHeaderTitle = FormHeaderTitle;
-
 var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
   var children = _ref4.children;
   return (0, _react.jsx)("div", {
     css: formHeaderWrapperStyles
   }, children);
 };
+
 /**
  * __Form header__
  *
@@ -94,14 +83,11 @@ var FormHeaderWrapper = function FormHeaderWrapper(_ref4) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
-
 var FormHeader = function FormHeader(_ref5) {
   var children = _ref5.children,
-      description = _ref5.description,
-      title = _ref5.title;
+    description = _ref5.description,
+    title = _ref5.title;
   return (0, _react.jsx)(FormHeaderWrapper, null, title && (0, _react.jsx)(FormHeaderTitle, null, title), description && (0, _react.jsx)(FormHeaderDescription, null, description), children && (0, _react.jsx)(FormHeaderContent, null, children));
 };
-
 var _default = FormHeader;
 exports.default = _default;

package/dist/cjs/form-section.js

@@ -1,23 +1,17 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 /** @jsx jsx */
+
 var gridSize = (0, _constants.gridSize)();
 var formSectionDescriptionStyles = (0, _react2.css)({
   marginTop: "".concat(gridSize, "px")
@@ -32,44 +26,41 @@ var formSectionTitleStyles = (0, _react2.css)({
 });
 var formSectionWrapperStyles = (0, _react2.css)({
   marginTop: "".concat(gridSize * 3, "px")
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
 
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var lightH600Styles = (0, _react2.css)((0, _typography.h600)({
   theme: {
     mode: 'light'
   }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-
+}));
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 var darkH600Styles = (0, _react2.css)((0, _typography.h600)({
   theme: {
     mode: 'dark'
   }
 }));
-
 var FormSectionWrapper = function FormSectionWrapper(_ref) {
   var children = _ref.children;
   return (0, _react2.jsx)("div", {
     css: formSectionWrapperStyles
   }, children);
 };
-
 var FormSectionTitle = function FormSectionTitle(_ref2) {
   var children = _ref2.children;
-
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react2.jsx)("h3", {
     css: [formSectionTitleStyles, mode === 'light' ? lightH600Styles : darkH600Styles]
   }, children);
 };
-
 var FormSectionDescription = function FormSectionDescription(_ref3) {
   var children = _ref3.children;
   return (0, _react2.jsx)("div", {
     css: formSectionDescriptionStyles
   }, children);
 };
+
 /**
  * __Form section__
  *
@@ -80,14 +71,11 @@ var FormSectionDescription = function FormSectionDescription(_ref3) {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  * - [Usage](https://atlaskit.atlassian.com/packages/design-system/form/docs/layout)
  */
-
-
 var FormSection = function FormSection(_ref4) {
   var children = _ref4.children,
-      description = _ref4.description,
-      title = _ref4.title;
+    description = _ref4.description,
+    title = _ref4.title;
   return (0, _react2.jsx)(FormSectionWrapper, null, title && (0, _react2.jsx)(FormSectionTitle, null, title), description && (0, _react2.jsx)(FormSectionDescription, null, description), children);
 };
-
 var _default = FormSection;
 exports.default = _default;

package/dist/cjs/form.js

@@ -1,29 +1,19 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IsDisabledContext = exports.FormContext = void 0;
 exports.default = Form;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _finalForm = require("final-form");
-
 var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
-
 var _set = _interopRequireDefault(require("lodash/set"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * __Form context__
  *
@@ -37,70 +27,64 @@ var FormContext = /*#__PURE__*/(0, _react.createContext)({
     return undefined;
   }
 });
+
 /**
  * __Is disabled context__
  *
  * An is disabled context creates the context for when a value is disabled.
  */
-
 exports.FormContext = FormContext;
 var IsDisabledContext = /*#__PURE__*/(0, _react.createContext)(false);
 exports.IsDisabledContext = IsDisabledContext;
-
 function Form(props) {
   var formRef = (0, _react.useRef)(null);
   var onSubmitRef = (0, _react.useRef)(props.onSubmit);
   onSubmitRef.current = props.onSubmit;
-
   var _useState = (0, _react.useState)(function () {
-    // Types here would break the existing API
-    var finalForm = (0, _finalForm.createForm)({
-      onSubmit: function onSubmit() {
-        return onSubmitRef.current.apply(onSubmitRef, arguments);
-      },
-      destroyOnUnregister: true,
-      initialValues: {},
-      mutators: {
-        setDefaultValue: function setDefaultValue(_ref, state) {
-          var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      // Types here would break the existing API
+      var finalForm = (0, _finalForm.createForm)({
+        onSubmit: function onSubmit() {
+          return onSubmitRef.current.apply(onSubmitRef, arguments);
+        },
+        destroyOnUnregister: true,
+        initialValues: {},
+        mutators: {
+          setDefaultValue: function setDefaultValue(_ref, state) {
+            var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
               name = _ref2[0],
               defaultValue = _ref2[1];
-
-          if (state.formState.initialValues) {
-            var _initialValues = state.formState.initialValues;
-            var values = state.formState.values;
-
-            var _value = name && typeof defaultValue === 'function' ? defaultValue(_initialValues[name]) : defaultValue;
-            /* eslint-disable no-param-reassign */
-
-
-            (0, _set.default)(_initialValues, name, _value);
-            (0, _set.default)(values, name, _value);
-            /* eslint-enable */
+            if (state.formState.initialValues) {
+              var _initialValues = state.formState.initialValues;
+              var values = state.formState.values;
+              var _value = name && typeof defaultValue === 'function' ? defaultValue(_initialValues[name]) : defaultValue;
+
+              /* eslint-disable no-param-reassign */
+              (0, _set.default)(_initialValues, name, _value);
+              (0, _set.default)(values, name, _value);
+              /* eslint-enable */
+            }
           }
         }
-      }
-    });
-    (0, _finalFormFocus.default)(function () {
-      return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
-    })(finalForm);
-    return finalForm;
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-      form = _useState2[0];
+      });
 
+      (0, _finalFormFocus.default)(function () {
+        return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
+      })(finalForm);
+      return finalForm;
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    form = _useState2[0];
   var _useState3 = (0, _react.useState)({
-    dirty: false,
-    submitting: false
-  }),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      state = _useState4[0],
-      setState = _useState4[1];
-
+      dirty: false,
+      submitting: false
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    state = _useState4[0],
+    setState = _useState4[1];
   (0, _react.useEffect)(function () {
     var unsubscribe = form.subscribe(function (_ref3) {
       var dirty = _ref3.dirty,
-          submitting = _ref3.submitting;
+        submitting = _ref3.submitting;
       setState({
         dirty: dirty,
         submitting: submitting
@@ -118,41 +102,34 @@ function Form(props) {
     form.resumeValidation();
     return unsubscribe;
   }, [form]);
-
   var handleSubmit = function handleSubmit(e) {
     if (e) {
       e.preventDefault();
     }
-
     form.submit();
   };
-
   var handleReset = function handleReset(initialValues) {
     form.reset(initialValues);
   };
-
   var handleKeyDown = function handleKeyDown(e) {
     if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && formRef.current) {
       var submitButton = formRef.current.querySelector('button:not([type]), button[type="submit"], input[type="submit"]');
-
       if (submitButton) {
         submitButton.click();
       }
-
       e.preventDefault();
     }
   };
-
   var _props$isDisabled = props.isDisabled,
-      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
-      children = props.children;
+    isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+    children = props.children;
   var dirty = state.dirty,
-      submitting = state.submitting;
+    submitting = state.submitting;
+
   /**
    * This method is needed in FormContext to use it on the field level
    * to check the current value of the field in case of the component re-mounting.
    */
-
   var getCurrentValue = (0, _react.useCallback)(function (name) {
     var formState = form.getState();
     return (formState === null || formState === void 0 ? void 0 : formState.values[name]) || undefined;

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -77,23 +76,13 @@ Object.defineProperty(exports, "default", {
     return _form.default;
   }
 });
-
 var _form = _interopRequireDefault(require("./form"));
-
 var _formHeader = _interopRequireDefault(require("./form-header"));
-
 var _formFooter = _interopRequireDefault(require("./form-footer"));
-
 var _formSection = _interopRequireDefault(require("./form-section"));
-
 var _field = _interopRequireDefault(require("./field"));
-
 var _checkboxField = _interopRequireDefault(require("./checkbox-field"));
-
 var _rangeField = _interopRequireDefault(require("./range-field"));
-
 var _label = _interopRequireDefault(require("./label"));
-
 var _messages = require("./messages");
-
 var _fieldset = _interopRequireDefault(require("./fieldset"));

package/dist/cjs/label.js

@@ -4,16 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
+var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _typography = require("@atlaskit/theme/typography");
-
 /** @jsx jsx */
+
 var fontFamily = (0, _constants.fontFamily)();
 var gridSize = (0, _constants.gridSize)();
 var labelStyles = (0, _react.css)({
@@ -21,19 +18,32 @@ var labelStyles = (0, _react.css)({
   marginTop: 0,
   marginBottom: gridSize / 2,
   fontFamily: fontFamily
-}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+});
+
+/**
+ * TODO: Address duplication with packages/design-system/form/src/fieldset.tsx
+ * in https://product-fabric.atlassian.net/browse/DSP-7731
+ */
+var getFieldsetLabelDynamicStyles = function getFieldsetLabelDynamicStyles(mode) {
+  return (0, _react.css)([(0, _typography.h200)({
+    theme: {
+      mode: mode
+    }
+  }), {
+    color: "var(--ds-text-subtle, ".concat((0, _colors.subtleHeading)({
+      theme: {
+        mode: mode
+      }
+    }), ")")
+  }]);
+};
+
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var lightH200Styles = getFieldsetLabelDynamicStyles('light');
 
-var lightH200Styles = (0, _react.css)((0, _typography.h200)({
-  theme: {
-    mode: 'light'
-  }
-})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var darkH200Styles = getFieldsetLabelDynamicStyles('dark');
 
-var darkH200Styles = (0, _react.css)((0, _typography.h200)({
-  theme: {
-    mode: 'dark'
-  }
-}));
 /**
  * __Label__
  *
@@ -42,21 +52,17 @@ var darkH200Styles = (0, _react.css)((0, _typography.h200)({
  * It's recommended that a label has a `4px` spacing above its associated
  * control element.
  */
-
 var Label = function Label(_ref) {
   var children = _ref.children,
-      htmlFor = _ref.htmlFor,
-      id = _ref.id;
-
+    htmlFor = _ref.htmlFor,
+    id = _ref.id;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
-      mode = _useGlobalTheme.mode;
-
+    mode = _useGlobalTheme.mode;
   return (0, _react.jsx)("label", {
     css: [mode === 'light' ? lightH200Styles : darkH200Styles, labelStyles],
     id: id,
     htmlFor: htmlFor
   }, children);
 };
-
 var _default = Label;
 exports.default = _default;