@toptal/picasso-forms 6.0.5 → 7.1.0

package/dist-package/Input/Input.js

@@ -1,26 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import { Input as PicassoInput } from '@toptal/picasso';
-import FieldWrapper from '../FieldWrapper';
-import getInputName from './utils/get-input-name';
-export const Input = React.forwardRef((props, ref) => (React.createElement(FieldWrapper, Object.assign({}, props), (_a) => {
-    var { name } = _a, inputProps = __rest(_a, ["name"]);
-    return (
-    // TODO: remove getInputName completely when Chrome fixes autocomplete issue
-    // Link to the issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1255609
-    React.createElement(PicassoInput, Object.assign({ name: getInputName(name) }, inputProps, { ref: ref })));
-})));
-Input.defaultProps = {};
-Input.displayName = 'Input';
-export default Input;
-//# sourceMappingURL=Input.js.map

package/dist-package/Input/Input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,KAAK,IAAI,YAAY,EAAc,MAAM,iBAAiB,CAAA;AAEnE,OAAO,YAA4B,MAAM,iBAAiB,CAAA;AAC1D,OAAO,YAAY,MAAM,wBAAwB,CAAA;AAQjD,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAC7E,oBAAC,YAAY,oBAAqB,KAAK,GACpC,CAAC,EAAmC,EAAE,EAAE;QAAvC,EAAE,IAAI,OAA6B,EAAxB,UAAU,cAArB,QAAuB,CAAF;IAAmB,OAAA;IACxC,4EAA4E;IAC5E,mFAAmF;IACnF,oBAAC,YAAY,kBAAC,IAAI,EAAE,YAAY,CAAC,IAAI,CAAC,IAAM,UAAU,IAAE,GAAG,EAAE,GAAG,IAAI,CACrE,CAAA;CAAA,CACY,CAChB,CAAC,CAAA;AAEF,KAAK,CAAC,YAAY,GAAG,EAAE,CAAA;AAEvB,KAAK,CAAC,WAAW,GAAG,OAAO,CAAA;AAE3B,eAAe,KAAK,CAAA"}

package/dist-package/Input/utils/get-input-name.d.ts

@@ -1,2 +0,0 @@
-declare const getInputName: (name?: string | undefined) => string | undefined;
-export default getInputName;

package/dist-package/Input/utils/get-input-name.js

@@ -1,9 +0,0 @@
-const NAMES_NEED_POSTFIX = ['field', 'input', 'title'];
-const getInputName = (name) => {
-    if (name && NAMES_NEED_POSTFIX.includes(name)) {
-        return `${name}-picasso`;
-    }
-    return name;
-};
-export default getInputName;
-//# sourceMappingURL=get-input-name.js.map

package/dist-package/Input/utils/get-input-name.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-input-name.js","sourceRoot":"","sources":["../../../src/Input/utils/get-input-name.ts"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAA;AAEtD,MAAM,YAAY,GAAG,CAAC,IAAa,EAAE,EAAE;IACrC,IAAI,IAAI,IAAI,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QAC7C,OAAO,GAAG,IAAI,UAAU,CAAA;KACzB;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,eAAe,YAAY,CAAA"}

package/dist-package/Input/utils/get-input-name.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist-package/Input/utils/get-input-name.test.js

@@ -1,12 +0,0 @@
-import getInputName from './get-input-name';
-describe('#getInputName', () => {
-    it.each(['title', 'field', 'input'])('adds postfix to "%s"', name => {
-        expect(getInputName(name)).toBe(`${name}-picasso`);
-    });
-    it('returns all other names', () => {
-        expect(getInputName('name')).toBe('name');
-        expect(getInputName('email')).toBe('email');
-        expect(getInputName(undefined)).toBeUndefined();
-    });
-});
-//# sourceMappingURL=get-input-name.test.js.map

package/dist-package/Input/utils/get-input-name.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-input-name.test.js","sourceRoot":"","sources":["../../../src/Input/utils/get-input-name.test.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,kBAAkB,CAAA;AAE3C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC7B,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAU,CAAC,CAC3C,sBAAsB,EACtB,IAAI,CAAC,EAAE;QACL,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,IAAI,UAAU,CAAC,CAAA;IACpD,CAAC,CACF,CAAA;IAED,EAAE,CAAC,yBAAyB,EAAE,GAAG,EAAE;QACjC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QACzC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAC3C,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,EAAE,CAAA;IACjD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist-package/README.md

@@ -1,29 +0,0 @@
-# @toptal/picasso-forms
-
-[![Picasso NPM package](https://img.shields.io/npm/v/@toptal/picasso-forms?color=green&logo=toptal)](https://www.npmjs.com/package/@toptal/picasso-forms)
-
-This package combines the state-management power of [React Final Form](https://final-form.org/react) with the amazing UX of Picasso. It also provides access to [React Final Form Arrays](https://github.com/final-form/react-final-form-arrays).
-
-## Prerequisites
-
-The following peer dependencies are required:
-
-- `@toptal/picasso`
-- `@toptal/picasso-lab`
-- `@toptal/picasso-shared`
-- `react`
-- `react-dom`
-
-## Setup
-
-- `yarn add @toptal/picasso-forms`
-
-## Limitations
-
-Not all final-form features are exposed through this package. If you find a missing one, please [open a Pull Request](../../CONTRIBUTING.md) and add it!
-
-For more info on what's available, check [the index](./src/index.ts).
-
-## Documentation
-
-Documentation and demos are available at [picasso.toptal.net](https://picasso.toptal.net/).

package/dist-package/package.json

@@ -1,44 +0,0 @@
-{
-  "name": "@toptal/picasso-forms",
-  "version": "6.0.5",
-  "description": "Picasso form components",
-  "author": "Toptal",
-  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
-  "license": "MIT",
-  "main": "index.js",
-  "module": "index.js",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/toptal/picasso.git"
-  },
-  "scripts": {
-    "build:package": "cross-env NODE_ENV=production node ../../bin/build.js --tsConfig=./tsconfig.build.json",
-    "prepublishOnly": "../../bin/prepublish.js"
-  },
-  "bugs": {
-    "url": "https://github.com/toptal/picasso/issues"
-  },
-  "peerDependencies": {
-    "@toptal/picasso": "^13.4.2",
-    "@toptal/picasso-lab": "^9.3.1",
-    "@toptal/picasso-shared": "^7",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
-  },
-  "dependencies": {
-    "classnames": "^2.3.1",
-    "final-form": "^4.20.2",
-    "final-form-arrays": "^3.0.2",
-    "react-final-form": "^6.5.1",
-    "react-final-form-arrays": "^3.1.3",
-    "react-final-form-listeners": "^1.0.3"
-  },
-  "devDependencies": {
-    "@types/classnames": "^2.3.1",
-    "@types/react-final-form-listeners": "^1.0.0",
-    "storybook-readme": "^5.0.9"
-  }
-}

package/src/Autocomplete/Autocomplete.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import {
-  Autocomplete as PicassoAutocomplete,
-  AutocompleteProps
-} from '@toptal/picasso'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-
-export type Props = AutocompleteProps & FieldProps<AutocompleteProps['value']>
-
-export const Autocomplete = (props: Props) => (
-  <FieldWrapper<AutocompleteProps> {...props}>
-    {(inputProps: AutocompleteProps) => {
-      return <PicassoAutocomplete {...inputProps} />
-    }}
-  </FieldWrapper>
-)
-
-Autocomplete.displayName = 'Autocomplete'
-
-export default Autocomplete

package/src/Autocomplete/index.ts

@@ -1 +0,0 @@
-export { default } from './Autocomplete'

package/src/ButtonCheckbox/ButtonCheckbox.tsx

@@ -1,57 +0,0 @@
-import React, { useContext } from 'react'
-import { Button, ButtonCheckboxProps } from '@toptal/picasso'
-import {
-  Field,
-  FieldRenderProps as FinalFormFieldProps
-} from 'react-final-form'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-import { CheckboxGroupContext } from '../CheckboxGroup'
-
-type CheckboxValue =
-  | ButtonCheckboxProps['value']
-  | ButtonCheckboxProps['checked']
-
-type CheckboxFormProps = Omit<ButtonCheckboxProps, 'requiredDecoration'> & {
-  required?: boolean
-}
-type CheckboxWithoutGroup = CheckboxFormProps & FieldProps<CheckboxValue>
-type CheckboxInGroup = CheckboxFormProps & { name?: string }
-
-export type Props = CheckboxWithoutGroup | CheckboxInGroup
-
-const ButtonCheckbox = ({ name, value, required, ...restProps }: Props) => {
-  const groupName = useContext(CheckboxGroupContext)
-  const isCheckboxInGroup = Boolean(groupName)
-
-  if (isCheckboxInGroup) {
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      <Field type='checkbox' name={name || groupName!} value={value}>
-        {({
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          input: { value: inputValue, type, ...restInput }
-        }: FinalFormFieldProps<CheckboxValue>) => {
-          return <Button.Checkbox {...restProps} {...restInput} />
-        }}
-      </Field>
-    )
-  }
-
-  return (
-    <FieldWrapper
-      type='checkbox'
-      hideFieldLabel
-      required={required}
-      {...restProps}
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      name={name!}
-    >
-      {(input: ButtonCheckboxProps) => <Button.Checkbox {...input} />}
-    </FieldWrapper>
-  )
-}
-
-ButtonCheckbox.displayName = 'ButtonCheckbox'
-
-export default ButtonCheckbox

package/src/ButtonCheckbox/index.ts

@@ -1 +0,0 @@
-export { default } from './ButtonCheckbox'

package/src/ButtonRadio/ButtonRadio.tsx

@@ -1,24 +0,0 @@
-import React, { useContext } from 'react'
-import { Button, ButtonRadioProps } from '@toptal/picasso'
-import { Field } from 'react-final-form'
-
-import { RadioGroupContext } from '../RadioGroup'
-
-export type Props = ButtonRadioProps & {
-  name?: string
-}
-
-const ButtonRadio = ({ name, ...rest }: Props) => {
-  const groupName = useContext(RadioGroupContext)
-
-  return (
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    <Field name={name || groupName!} type='radio' value={rest.value}>
-      {({ input }) => <Button.Radio checked={input.checked} {...rest} />}
-    </Field>
-  )
-}
-
-ButtonRadio.displayName = 'ButtonRadio'
-
-export default ButtonRadio

package/src/ButtonRadio/index.ts

@@ -1 +0,0 @@
-export { default } from './ButtonRadio'

package/src/Checkbox/Checkbox.tsx

@@ -1,73 +0,0 @@
-import React, { useContext } from 'react'
-import { Checkbox as PicassoCheckbox, CheckboxProps } from '@toptal/picasso'
-import {
-  Field,
-  FieldRenderProps as FinalFormFieldProps
-} from 'react-final-form'
-
-import FieldWrapper, { FieldProps } from '../FieldWrapper'
-import { CheckboxGroupContext } from '../CheckboxGroup'
-import { useFormConfig } from '../FormConfig'
-
-type CheckboxValue = CheckboxProps['value'] | CheckboxProps['checked']
-
-type CheckboxFormProps = Omit<CheckboxProps, 'requiredDecoration'> & {
-  required?: boolean
-}
-type CheckboxWithoutGroup = CheckboxFormProps & FieldProps<CheckboxValue>
-type CheckboxInGroup = CheckboxFormProps & { name?: string }
-
-export type Props = CheckboxWithoutGroup | CheckboxInGroup
-
-export const Checkbox = ({
-  name,
-  value,
-  required,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  defaultValue,
-  ...restProps
-}: Props) => {
-  const formConfig = useFormConfig()
-  const groupName = useContext(CheckboxGroupContext)
-  const isCheckboxInGroup = Boolean(groupName)
-
-  if (isCheckboxInGroup) {
-    return (
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      <Field type='checkbox' name={name || groupName!} value={value}>
-        {({
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          input: { value: inputValue, type, ...restInput }
-        }: FinalFormFieldProps<CheckboxValue>) => {
-          return <PicassoCheckbox {...restProps} {...restInput} />
-        }}
-      </Field>
-    )
-  }
-
-  const showAsterisk = required && formConfig.requiredVariant === 'asterisk'
-  const requiredDecoration = showAsterisk ? 'asterisk' : undefined
-
-  return (
-    <FieldWrapper
-      type='checkbox'
-      hideFieldLabel
-      required={required}
-      {...restProps}
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      name={name!}
-    >
-      {(input: CheckboxProps) => (
-        <PicassoCheckbox
-          {...input}
-          titleCase={restProps.titleCase}
-          requiredDecoration={requiredDecoration}
-        />
-      )}
-    </FieldWrapper>
-  )
-}
-
-Checkbox.displayName = 'Checkbox'
-
-export default Checkbox

package/src/Checkbox/__snapshots__/test.tsx.snap

@@ -1,254 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form.Checkbox default render for checkboxes in a group 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class=""
-    >
-      <form>
-        <div
-          class="PicassoFormField-root"
-          data-field-has-error="false"
-        >
-          <label
-            class="PicassoFormLabel-root"
-            for="checkbox-group"
-          >
-            <span
-              class="PicassoFormLabel-text"
-            >
-              checkbox-group-label
-               (optional)
-            </span>
-          </label>
-          <div
-            class="MuiFormGroup-root PicassoCheckboxGroup-root PicassoCheckboxGroup-root"
-            label="checkbox-group-label"
-            name="checkbox-group"
-          >
-            <div
-              class="MuiGrid-root PicassoCheckboxGroup-grid MuiGrid-container PicassoGrid-container MuiGrid-direction-xs MuiGrid-align-items-xs-flex"
-            >
-              <div
-                class="MuiGrid-root PicassoCheckboxGroup-gridItem MuiGrid-item"
-              >
-                <label
-                  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
-                >
-                  <span
-                    class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
-                    >
-                      <span
-                        class="MuiIconButton-label"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input"
-                          data-indeterminate="false"
-                          name="checkbox-group"
-                          type="checkbox"
-                          value=""
-                        />
-                        <div
-                          class="PicassoCheckbox-uncheckedIcon"
-                        />
-                      </span>
-                    </span>
-                  </span>
-                  <span
-                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
-                  >
-                    <span
-                      class="PicassoFormLabel-text"
-                    >
-                      checkbox-label-0
-                    </span>
-                  </span>
-                </label>
-              </div>
-              <div
-                class="MuiGrid-root PicassoCheckboxGroup-gridItem MuiGrid-item"
-              >
-                <label
-                  class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
-                >
-                  <span
-                    class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
-                  >
-                    <span
-                      aria-disabled="false"
-                      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
-                    >
-                      <span
-                        class="MuiIconButton-label"
-                      >
-                        <input
-                          class="PrivateSwitchBase-input"
-                          data-indeterminate="false"
-                          name="checkbox-group"
-                          type="checkbox"
-                          value=""
-                        />
-                        <div
-                          class="PicassoCheckbox-uncheckedIcon"
-                        />
-                      </span>
-                    </span>
-                  </span>
-                  <span
-                    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
-                  >
-                    <span
-                      class="PicassoFormLabel-text"
-                    >
-                      checkbox-label-1
-                    </span>
-                  </span>
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Form.Checkbox default render for single checkbox 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class=""
-    >
-      <form>
-        <div
-          class="PicassoFormField-root"
-          data-field-has-error="false"
-          data-testid="single-checkbox"
-        >
-          <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
-          >
-            <span
-              class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
-              >
-                <span
-                  class="MuiIconButton-label"
-                >
-                  <input
-                    class="PrivateSwitchBase-input"
-                    data-indeterminate="false"
-                    id="single-checkbox"
-                    name="single-checkbox"
-                    type="checkbox"
-                    value=""
-                  />
-                  <div
-                    class="PicassoCheckbox-uncheckedIcon"
-                  />
-                </span>
-              </span>
-            </span>
-            <span
-              class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
-            >
-              <span
-                class="PicassoFormLabel-text"
-              >
-                The checkbox label
-              </span>
-            </span>
-          </label>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Form.Checkbox required with asterisk single checkbox 1`] = `
-<div>
-  <div
-    class="Picasso-root"
-  >
-    <div
-      class=""
-    >
-      <form>
-        <div
-          class="PicassoFormField-root"
-          data-field-has-error="false"
-          data-testid="single-checkbox"
-        >
-          <label
-            class="PicassoFormControlLabel-root PicassoCheckbox-root picasso-checkbox"
-          >
-            <span
-              class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
-            >
-              <span
-                aria-disabled="false"
-                class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiCheckbox-root PicassoCheckbox-root MuiCheckbox-colorSecondary PicassoCheckbox-withLabel MuiIconButton-colorSecondary"
-              >
-                <span
-                  class="MuiIconButton-label"
-                >
-                  <input
-                    class="PrivateSwitchBase-input"
-                    data-indeterminate="false"
-                    id="single-checkbox"
-                    name="single-checkbox"
-                    type="checkbox"
-                    value=""
-                  />
-                  <div
-                    class="PicassoCheckbox-uncheckedIcon"
-                  />
-                </span>
-              </span>
-            </span>
-            <span
-              class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoCheckbox-label"
-            >
-              <span
-                class="PicassoFormLabel-asterisk"
-              >
-                *
-              </span>
-              <span
-                class="PicassoFormLabel-text"
-              >
-                The checkbox label
-              </span>
-            </span>
-          </label>
-        </div>
-      </form>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Form.Checkbox when required prop is passed does not set "required" attribute to input tag, to avoid Chrome tooltip 1`] = `
-<input
-  class="PrivateSwitchBase-input"
-  data-indeterminate="false"
-  id="single-checkbox"
-  name="single-checkbox"
-  type="checkbox"
-  value=""
-/>
-`;

package/src/Checkbox/index.ts

@@ -1 +0,0 @@
-export { default } from './Checkbox'