@popsure/dirty-swan 0.65.1 → 0.66.1

package/dist/esm/lib/index.d.ts

@@ -19,6 +19,7 @@ import Chip from './components/chip';
 import { AutoSuggestInput } from './components/input/autoSuggestInput';
 import { ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, TableHeader } from './components/comparisonTable';
 import { SegmentedControl } from './components/segmentedControl';
+import { SearchableDropdown, SearchableDropdownProps, SearchableDropdownOption } from './components/searchableDropdown';
 import { Link } from './components/link';
 import { illustrations, images, IllustrationKeys } from './util/images';
 import { Spinner } from './components/spinner';
@@ -40,6 +41,6 @@ import { LogoInverted } from './components/logo/LogoInverted';
 import { LogoPositiveColor } from './components/logo/LogoPositiveColor';
 import { LogoPositiveBlack } from './components/logo/LogoPositiveBlack';
 export * from './components/icon';
-export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
-export type { AccordionProps, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, };
+export { Accordion, DateSelector, SignaturePad, AutocompleteAddress, Input, MultiDropzone, DownloadButton, IbanInput, BottomModal, RegularModal, BottomOrRegularModal, FullScreenModal, InfoCard, Card, CardButton, Button, CurrencyInput, AutoSuggestMultiSelect, Chip, AutoSuggestInput, ComparisonTable, TableRating, TableTrueFalse, TableRowHeader, TableButton, TableInfoButton, SearchableDropdown, SegmentedControl, Checkbox, Radio, Link, InformationBox, Badge, images, illustrations, Spinner, Table, Toggle, Toaster, toast, useEscapeKey, useFocusWithin, useOnClickOutside, useMediaQuery, LogoColor, LogoWhite, LogoBlack, LogoOrangeBox, LogoInvertedColor, LogoInverted, LogoPositiveColor, LogoPositiveBlack, };
+export type { AccordionProps, SearchableDropdownProps, SearchableDropdownOption, BadgeProps, IllustrationKeys, InformationBoxProps, InputProps, FileType, MultiDropzoneProps, TableHeader, UploadedFile, UploadStatus, CardProps, IconWrapperProps, TableData, TableProps, };
 export type { DownloadStatus } from './models/download';

package/dist/esm/useOnClickOutside-B5hujnpp.js

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+var useOnClickOutside = function (ref, callback) {
+    useEffect(function () {
+        var listener = function (event) {
+            if (!ref.current || ref.current.contains(event.target)) {
+                return;
+            }
+            callback(event);
+        };
+        document.addEventListener('mousedown', listener);
+        document.addEventListener('touchstart', listener);
+        return function () {
+            document.removeEventListener('mousedown', listener);
+            document.removeEventListener('touchstart', listener);
+        };
+    }, [ref, callback]);
+};
+
+export { useOnClickOutside as u };
+//# sourceMappingURL=useOnClickOutside-B5hujnpp.js.map

package/dist/esm/useOnClickOutside-B5hujnpp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOnClickOutside-B5hujnpp.js","sources":["../../../src/lib/hooks/useOnClickOutside.ts"],"sourcesContent":["import { RefObject, useEffect } from 'react';\n\nexport const useOnClickOutside = (\n  ref: RefObject<HTMLDivElement | null>,\n  callback: (e: Event) => void\n) => {\n  useEffect(() => {\n    const listener = (event: Event) => {\n      if (!ref.current || ref.current.contains(event.target as Node)) {\n        return;\n      }\n      callback(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, callback]);\n};\n"],"names":[],"mappings":";;AAEO,IAAM,iBAAiB,GAAG,UAC/B,GAAqC,EACrC,QAA4B,EAAA;AAE5B,IAAA,SAAS,CAAC,YAAA;QACR,IAAM,QAAQ,GAAG,UAAC,KAAY,EAAA;AAC5B,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;gBAC9D;YACF;YACA,QAAQ,CAAC,KAAK,CAAC;AACjB,QAAA,CAAC;AACD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,QAAQ,CAAC;AAChD,QAAA,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,QAAQ,CAAC;QACjD,OAAO,YAAA;AACL,YAAA,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,QAAQ,CAAC;AACnD,YAAA,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC;AACtD,QAAA,CAAC;AACH,IAAA,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;AACrB;;;;"}

package/dist/esm/util/images/index.stories.js

@@ -18,7 +18,8 @@ import '../../components/table/components/TableCell/TableCell.js';
 import { s as styleInject } from '../../style-inject.es-tgCJW-Cu.js';
 import '../../_commonjsHelpers-BFTU3MAI.js';
 import '../../tslib.es6-CVlKGIvp.js';
-import '../../Calendar-C7I0F5Gv.js';
+import '../../Calendar-8rhyapMz.js';
+import '../../useOnClickOutside-B5hujnpp.js';
 import '../../components/icon/icons/Calendar.js';
 import '../../components/icon/IconWrapper/IconWrapper.js';
 import '../../index-CNcEE5dn.js';

package/dist/esm/util/images/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations);\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(\n      initialImages.filter(([key]) =>\n        key.toLowerCase().includes(searchValue.toLowerCase())\n      )\n    );\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className=\"d-flex gap8 wmx12 m-auto\">\n          <Input\n            className=\"w70\"\n            onChange={handleOnSearch}\n            placeholder=\"Search icon\"\n            value={value}\n          />\n          <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n            Clear search\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"d-flex f-wrap mt80\">\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className=\"p-p--small mt16\">{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.stories.js","sources":["../../../../../src/lib/util/images/index.stories.tsx"],"sourcesContent":["import { ChangeEvent, useState } from 'react';\nimport { illustrations } from '../../util/images';\nimport classNames from 'classnames';\nimport { Button, Input } from '../..';\nimport styles from './style.module.scss';\n\nconst story = {\n  title: 'Utils/Illustrations',\n  parameters: {\n    docs: {\n      description: {\n        component:\n          'Use the `illustrations` object export to access our list of available images.',\n      },\n    },\n  },\n};\n\nconst initialImages = Object.entries(illustrations);\n\nexport const Illustrations = () => {\n  const [value, setValue] = useState('');\n  const [options, setOptions] = useState(initialImages);\n\n  const clearSearch = () => {\n    setValue('');\n    setOptions(initialImages);\n  };\n\n  const handleOnSearch = (event: ChangeEvent<HTMLInputElement>) => {\n    const searchValue = event.target.value;\n    setValue(event.target.value);\n\n    if (searchValue === '') {\n      setOptions(initialImages);\n      return;\n    }\n\n    setOptions(\n      initialImages.filter(([key]) =>\n        key.toLowerCase().includes(searchValue.toLowerCase())\n      )\n    );\n  };\n\n  return (\n    <div>\n      <div className={classNames(styles.searchBar, 'bg-white')}>\n        <div className=\"d-flex gap8 wmx12 m-auto\">\n          <Input\n            className=\"w70\"\n            onChange={handleOnSearch}\n            placeholder=\"Search icon\"\n            value={value}\n          />\n          <Button className=\"w30\" disabled={!value} onClick={clearSearch}>\n            Clear search\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"d-flex f-wrap mt80\">\n        {options.map(([iconKey, src]) => (\n          <div key={iconKey} className=\"w20 p8\">\n            <div className=\"br4 p24 pt16 pb16 bg-neutral-50 w100 d-flex fd-column ai-center\">\n              <div className={styles.imageWrapper}>\n                <img src={src} alt={iconKey} />\n              </div>\n              <span className=\"p-p--small mt16\">{iconKey}</span>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default story;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@popsure/dirty-swan",
-  "version": "0.65.1",
+  "version": "0.66.1",
   "author": "Vincent Audoire <vincent@getpopsure.com>",
   "license": "MIT",
   "private": false,

package/src/index.tsx

@@ -53,6 +53,7 @@ export {
   LogoInverted,
   LogoPositiveColor,
   LogoPositiveBlack,
+  SearchableDropdown,
 } from './lib';
 
 export * from './lib/components/icon';
@@ -73,6 +74,8 @@ export type {
   IconWrapperProps,
   TableData,
   TableProps,
+  SearchableDropdownProps,
+  SearchableDropdownOption,
 } from './lib';
 
 ReactDOM.render(<App />, document.getElementById('root'));

package/src/lib/components/searchableDropdown/index.stories.tsx

@@ -0,0 +1,286 @@
+import { useState } from 'react';
+import { SearchableDropdown, SearchableDropdownProps } from '.';
+
+const story = {
+  title: 'JSX/SearchableDropdown',
+  component: SearchableDropdown,
+  argTypes: {
+    options: {
+      description: 'Array of options to display',
+      table: {
+        type: {
+          summary: '{ id: string; label: string; icon?: ReactNode }[]',
+        },
+      },
+    },
+    value: {
+      description: 'The currently selected option id',
+    },
+    onChange: {
+      action: true,
+      table: {
+        category: 'Callbacks',
+      },
+    },
+    searchable: {
+      description: 'Whether the dropdown includes a search input',
+      control: 'boolean',
+    },
+    placeholder: {
+      description: 'Placeholder text for the search input',
+      control: 'text',
+    },
+    triggerPlaceholder: {
+      description: 'Placeholder text shown on the trigger when no value is selected',
+      control: 'text',
+    },
+    noResultsText: {
+      description: 'Text shown when no options match the search',
+      control: 'text',
+    },
+    groupName: {
+      description: 'Name attribute for the radio group',
+      control: 'text',
+    },
+    dropUp: {
+      description: 'Whether the dropdown opens upward',
+      control: 'boolean',
+    },
+    condensed: {
+      description: 'Whether to use a compact trigger (icon only)',
+      control: 'boolean',
+    },
+    bordered: {
+      description: 'Whether to show a border on the trigger',
+      control: 'boolean',
+    },
+    showChevron: {
+      description: 'Whether to show a chevron icon on the trigger',
+      control: 'boolean',
+    },
+  },
+  args: {
+    options: [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+      { id: 'it', label: 'Italy' },
+      { id: 'pt', label: 'Portugal' },
+    ],
+    value: 'de',
+    searchable: false,
+    placeholder: 'Search',
+    triggerPlaceholder: 'Select a country',
+    noResultsText: 'No results found',
+    groupName: 'country',
+    dropUp: false,
+    condensed: false,
+    bordered: false,
+    showChevron: false,
+  },
+  parameters: {
+    componentSubtitle:
+      'A dropdown component that supports searchable options with keyboard navigation.',
+  },
+};
+
+export const Default = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState(args.value);
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'Default',
+};
+
+export const Searchable = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState(args.value);
+
+    const options = [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+      { id: 'it', label: 'Italy' },
+      { id: 'pt', label: 'Portugal' },
+      { id: 'nl', label: 'Netherlands' },
+      { id: 'be', label: 'Belgium' },
+      { id: 'at', label: 'Austria' },
+      { id: 'ch', label: 'Switzerland' },
+      { id: 'pl', label: 'Poland' },
+    ];
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          searchable
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'Searchable',
+};
+
+export const WithIcons = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany', icon: <span>🇩🇪</span> },
+      { id: 'fr', label: 'France', icon: <span>🇫🇷</span> },
+      { id: 'es', label: 'Spain', icon: <span>🇪🇸</span> },
+      { id: 'it', label: 'Italy', icon: <span>🇮🇹</span> },
+      { id: 'pt', label: 'Portugal', icon: <span>🇵🇹</span> },
+    ];
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'With Icons',
+};
+
+export const Condensed = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany', icon: <span>🇩🇪</span> },
+      { id: 'fr', label: 'France', icon: <span>🇫🇷</span> },
+      { id: 'es', label: 'Spain', icon: <span>🇪🇸</span> },
+    ];
+
+    return (
+      <SearchableDropdown
+        {...args}
+        options={options}
+        condensed
+        bordered
+        value={selected}
+        onChange={(val) => {
+          args.onChange(val);
+          setSelected(val);
+        }}
+      />
+    );
+  },
+
+  name: 'Condensed',
+};
+
+export const WithChevron = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+    ];
+
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          showChevron
+          bordered
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'With Chevron',
+};
+
+export const Disabled = {
+  render: (args: SearchableDropdownProps) => {
+    return (
+      <div style={{ width: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={[
+            { id: 'de', label: 'Germany' },
+            { id: 'fr', label: 'France' },
+            { id: 'es', label: 'Spain' },
+          ]}
+          disabled
+          bordered
+          showChevron
+          value="de"
+          onChange={args.onChange}
+        />
+      </div>
+    );
+  },
+
+  name: 'Disabled',
+};
+
+export const DropUp = {
+  render: (args: SearchableDropdownProps) => {
+    const [selected, setSelected] = useState('de');
+
+    const options = [
+      { id: 'de', label: 'Germany' },
+      { id: 'fr', label: 'France' },
+      { id: 'es', label: 'Spain' },
+    ];
+
+    return (
+      <div style={{ width: 300, marginTop: 300 }}>
+        <SearchableDropdown
+          {...args}
+          options={options}
+          dropUp
+          searchable
+          value={selected}
+          onChange={(val) => {
+            args.onChange(val);
+            setSelected(val);
+          }}
+        />
+      </div>
+    );
+  },
+
+  name: 'Drop Up',
+};
+
+export default story;